#site-header{
    position: fixed;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 1000;	
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

#site-header .site-branding{
	display:none;	
}

.site-header .header-inner{
	justify-content:right !important;	
}

.site-header{
	color: var(--primary-color);
	background: var(--dark);	
}

.site-header .site-navigation a,
.site-header .site-navigation a:hover{
	color: var(--link-color);
}

.site-header .site-branding img{
	max-width:200px;
	width:100%;
}

main#content{
	margin-top:80px;	
}

#ds-link{
	color:rgba(255,255,255,0.5);
}

#ds-link:hover{
	text-decoration:underline;
}

.hero-bulletpoints ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-bulletpoints li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 14px;

    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

.hero-bulletpoints li:last-child {
    margin-bottom: 0;
}

.hero-bulletpoints li::before{
    content: "✓";

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 22px;
    height: 22px;

    background: #7DBB35;
    color: #fff;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 3px 8px rgba(125,187,53,.35);
}


.hero {
    position: relative;
    overflow: hidden;
}

.hero.e-con::before{
	content: '' !important;	
}

.hero::before{
    content:"";
	position:absolute;
    inset:0;
    z-index:1;

    background:linear-gradient(
        to right,
        rgba(8,18,34,.95) 0%,
        rgba(8,18,34,.92) 20%,
        rgba(8,18,34,.65) 32%,
        rgba(8,18,34,.28) 40%,
        rgba(8,18,34,.08) 46%,
        transparent 50%
    );
}



.listing-no ul{
    list-style:none;
    margin:0;
    padding:0;
}

.listing-yes ul{
    list-style:none;
    margin:0;
    padding:0;
}

.listing-no li{

    position:relative;

    padding-left:42px;

    margin-bottom:20px;

    font-size:22px;
    font-weight:600;
    line-height:1.35;
    color:#1d2433;

}

.listing-no li:last-child{
    margin-bottom:0;
}

.listing-no li::before{

    content:"!";

    position:absolute;
    left:0;
    top:3px;

    width:26px;
    height:26px;

    border-radius:50%;
	
    background:#ff6666;	

    color:#fff;

    font-size:18px;
    font-weight:800;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 4px 10px rgba(215,47,47,.35);

}


.listing-no li::after{

    content:"";

    position:absolute;

    left:12px;
    top:8px;

    background:#fff;

    border-radius:3px;

    box-shadow:
        0 13px 0 #fff;
}


.listing-yes li{

    position:relative;

    padding-left:42px;

    margin-bottom:20px;

    font-size:22px;
    font-weight:600;
    line-height:1.35;
	list-style:none;
    color:#1d2433;

}

.listing-yes li::before{
    content: "✓";

    position:absolute;
    left:0;
    top:3px;

    width:26px;
    height:26px;

    border-radius:50%;
	
	background: #7DBB35;

    color:#fff;

    font-size:18px;
    font-weight:800;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow: 0 3px 8px rgba(125,187,53,.35);
}


.right-side-listing{
    position:relative;
    background:#fff;
    border-radius:16px;
    padding:40px 35px 35px;
    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

    max-width:320px !important;

}

.right-side-listing ul{
	list-style:none;
	padding:0;
	margin:0;
}

.right-side-listing ul li {
    color: #7DBB35;
    font-weight: 800;
    font-size: 22px;
    line-height: 36px;
}



.right-side-listing::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 75px;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    background: url("../images/blitz.webp") center center / contain no-repeat;
    z-index: 5;
}




/* ==========================================================
   FAQ
========================================================== */

.faq-area .e-n-accordion-item-title-icon{

    background:#8bc21c !important;
    color:#fff !important;

}

.faq-area .e-n-accordion-item[open] .e-n-accordion-item-title-icon{

    background:#8bc21c !important;
    color:#fff !important;

}

.faq-area{

    margin-top:40px;
	padding-bottom:50px;

}


/* Überschrift */

.faq-area h2{

    font-size:52px;

    font-weight:800;

    text-align:center;

    color:#13253f;

    margin-bottom:10px;

}

.faq-area .subtitle{

    text-align:center;

    font-size:22px;

    color:#7fb51d;

    margin-bottom:50px;

}


/* Accordion */

.faq-area .e-n-accordion{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* Karten */

.faq-area .e-n-accordion-item{

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

    border:1px solid #edf1f5;

    box-shadow:0 12px 35px rgba(16,36,63,.08);

    transition:.35s ease;

}


/* Hover */

.faq-area .e-n-accordion-item:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(16,36,63,.14);

}


/* Geöffnet */

.faq-area .e-n-accordion-item[open]{

    border-left:6px solid #8bc21c;

}


/* Frage */

.faq-area summary{

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    list-style:none;

    padding:28px 35px;

    background:#ffffff;

}


/* Browsermarker entfernen */

.faq-area summary::-webkit-details-marker{

    display:none;

}


/* Frage */

.faq-area .e-n-accordion-item-title-text{

    font-size:23px;

    font-weight:700;

    color:#14243d;

}


/* Icon */

.faq-area .e-n-accordion-item-title-icon{

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    background:#8bc21c;

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}


/* geöffnet */

.faq-area .e-n-accordion-item[open] .e-n-accordion-item-title-icon{

    background:#14243d;

    transform:rotate(180deg);

}


/* Antwort */

.faq-area .elementor-widget-text-editor{

    padding:0 35px 30px;

}


.faq-area .elementor-widget-text-editor p{

    margin:0;

    color:#4d5d73;

    font-size:18px;

    line-height:1.8;

}


/* leichte Trennlinie */

.faq-area .e-n-accordion-item[open] .elementor-widget-text-editor{

    border-top:1px solid #edf1f5;

    padding-top:25px;

}


/* Focus */

.faq-area summary:focus{

    outline:none;

}


/* Animation */

.faq-area .e-n-accordion-item{

    transition:
        transform .3s,
        box-shadow .3s,
        border-color .3s;

}




/* ==========================================================
   Schritte
========================================================== */

#c-steps .elementor-widget-icon-box{
    position:relative;
}

/* Kreis */

#c-steps .elementor-widget-icon-box::before{

    position:absolute;

    top:-18px;
    left:18px;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#9FB116;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    font-weight:700;

    box-shadow:0 8px 18px rgba(139,194,28,.35);

    z-index:5;

}

/* Nummern */

#c-steps .anfrage-senden::before{
    content:"1";
}

#c-steps .batterie-pruefen::before{
    content:"2";
}

#c-steps .loesung-erhalten::before{
    content:"3";
}




/* Standard-Menüpunkte */
/* Menülinks */
.site-header .menu > li:not(:last-child) > a{

    position: relative;
    display: inline-block;

}

.site-header .menu > li:not(:last-child) > a:hover{
    background: rgba(0,0,0,0.25);
    border-radius: 12px;
}


/*.site-header .menu > li:not(:last-child) > a::after{

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 3px;

    background: #9FB116;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .3s ease;

}
*/

/* Hover */
/*.site-header .menu > li:not(:last-child) > a:hover::after{

    transform: scaleX(1);

}*/

.site-header .menu>li:last-child>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    background: #9FB116;
    color: #fff !important;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .25s ease;
    margin-left: 30px;
}

#menu-main-menu{
	gap:15px;	
}


#bulletpoints{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px;
}


.site-navigation-toggle-holder .site-navigation-toggle{
	color:#fff !important;	
}

.site-navigation-dropdown ul.menu li.current-menu-item a {
    background: transparent !important;
    color: #555 !important;
    width: 100%;
}




.hero-benefits {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    background: rgba(0, 68, 86, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;

    padding: 22px 10px;
    overflow: hidden;
}

.hero-benefit {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    padding: 0 24px;
}

/* Trennlinie rechts */
.hero-benefit:not(:last-child)::after {
    content: "";
    position: absolute;

    right: 0;
    top: 10px;
    bottom: 10px;

    width: 1px;

    background: rgba(255, 255, 255, 0.3);
}


/* Icon */

.hero-benefit-icon {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 12px;
}


/* Überschrift */

.hero-benefit h3 {
    margin: 0 0 10px;

    color: #fff;

    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;

    text-transform: uppercase;
}


/* Beschreibung */

.hero-benefit p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;
    line-height: 1.5;
}


.innovation p {
    display: inline-block;
    margin: 0 !important;
    padding: 7px 10px;

    color: #9FB116;
    border: 1px solid #9FB116;
    border-radius: 4px;

    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}




.km-highlight {
    display: flex;
    align-items: stretch;
    justify-content: center;

    width: 100%;
	max-width:1400px;
	margin:0 auto;
}

.km-highlight-item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    flex: 1 1 0;
    min-width: 0;

    padding: 25px 40px;
}


/* Trennlinien */

.km-highlight-item:not(:last-child)::after {
    content: "";
    position: absolute;

    right: 0;
    top: 15%;
    bottom: 15%;

    width: 1px;

    background: rgba(255, 255, 255, 0.55);
}


/* Icons */

.km-highlight-icon {
    display: block;

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    object-fit: contain;
}


/* Text */

.km-highlight-text {
    color: #fff;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;

    text-transform: uppercase;
}

/* =========================================
   Krautmesser – WPForms Layout
   Formular #384
   ========================================= */

.customform .wpforms-field-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 10px;
}


/* Grundsätzlich alle sichtbaren Felder */
.customform .wpforms-field {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
	padding:0 !important;
}
	
/* -----------------------------------------
   ZEILE 1
   Name | Unternehmen
   ----------------------------------------- */

#wpforms-384-field_5-container {
    grid-column: 1;
}

#wpforms-384-field_7-container {
    grid-column: 2;
}


/* -----------------------------------------
   ZEILE 2
   E-Mail | Telefon
   ----------------------------------------- */

#wpforms-384-field_2-container {
    grid-column: 1;
}

#wpforms-384-field_4-container {
    grid-column: 2;
}


/* -----------------------------------------
   ZEILE 3
   Nachricht volle Breite
   ----------------------------------------- */

#wpforms-384-field_3-container {
    grid-column: 1 / -1;
}


/* -----------------------------------------
   Datenschutz volle Breite
   ----------------------------------------- */

#wpforms-384-field_6-container {
    grid-column: 1 / -1;
}


/* Eingabefelder auf komplette Spaltenbreite */

.customform input[type="text"],
.customform input[type="email"],
.customform input[type="tel"],
.customform textarea {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}


/* Textarea */

.customform textarea {
    min-height: 130px;
    resize: vertical;
}

#ds-link{
	color:#9FB116;
}

#ds-link a:hover{
	text-decoration:underline;
}

.sendbutton{
	background-color:#9FB116 !important;
	color:#fff !important;
}

/* -----------------------------------------
   Submit Button
   ----------------------------------------- */

.customform .wpforms-submit-container {
    width: 100%;
    margin-top: 10px !important;
    padding: 0 !important;
}

.customform .wpforms-submit {
    width: 100% !important;
}




#anfrage-rechts {
    background-image: url('/wp-content/themes/hello-elementor-km/assets/images/messerscheibe-footer.webp');
    background-repeat: no-repeat;
    background-position: 220px 0;
    background-size: contain;
}

#anfrage-links{
	padding-left:10%;	
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .customform .wpforms-field-container {
        grid-template-columns: 1fr;
    }

    #wpforms-384-field_5-container,
    #wpforms-384-field_7-container,
    #wpforms-384-field_2-container,
    #wpforms-384-field_4-container,
    #wpforms-384-field_3-container,
    #wpforms-384-field_6-container {
        grid-column: 1;
    }

}



/* Aufzählung – Für Ihre Produktion */
#colmn-production ul {
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
}

#colmn-production ul li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 8px;
    line-height: 1.25;
}

/* Grünes Häkchen */
#colmn-production ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;

    color: #76B82A;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

/* Beim letzten Punkt keinen zusätzlichen Abstand */
#colmn-production ul li:last-child {
    margin-bottom: 0;
}






























#system {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr) minmax(0, 1fr) 400px;
    width: 100%;
}

#system > * {
    min-width: 0;
    width: auto;
}

#benefits-bottom {
    display: grid;

    /* Text | Bild | Text | Bild */
    grid-template-columns:
        minmax(0, 1fr)
        400px
        minmax(0, 1fr)
        400px;

    width: 100%;
}


/* Elementor-Breiten überschreiben */
#benefits-bottom > * {
    min-width: 0;
    width: auto;
}


/* Bilder sauber innerhalb ihrer Spalten halten */
#benefits-bottom img {
    max-width: 100%;
    height: auto;
    display: block;
}


#column-production{
	grid-column:1 / -1;
}

/* =========================
   UNTER 1260 PX
   ========================= */

@media (max-width: 1259px) {

    #system {
		padding-bottom:0;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* Bild 1 */
    #system > [data-id="db6e82d"] {
        grid-column: 1 / span 3;
        grid-row: 1;
    }

    /* Text 1 */
    #system > [data-id="e8e2a21"] {
        grid-column: 4 / -1;
        grid-row: 1;
    }

    /* Text 2 */
    #system > [data-id="364dde4"] {
        grid-column: 1 / span 8;
        grid-row: 2;
    }

    /* Bild 2 */
    #system > [data-id="9e1f714"] {
        grid-column: 9 / -1;
        grid-row: 2;
    }
	
	#benefits-bottom{
		padding-top:0;	
		padding-bottom:0;
	}
	
    #benefits-bottom {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* =========================
       ZEILE 1
       Bild 1 | Text 1
       ========================= */

    #benefits-bottom > [data-id="1d3abf0"] {
        grid-column: 1 / span 4;
        grid-row: 1;
    }

    #benefits-bottom > [data-id="8b59552"] {
        grid-column: 5 / -1;
        grid-row: 1;
    }


    /* =========================
       ZEILE 2
       Text 2 | Bild 2
       ========================= */

    #benefits-bottom > [data-id="902139b"] {
        grid-column: 1 / span 8;
        grid-row: 2;
    }

    #benefits-bottom > [data-id="0548c93"] {
        grid-column: 9 / -1;
        grid-row: 2;
    }
	
    /* Bild 1 – Trennlinie rechts */
    #sichelgeometrie {
        border-right: 1px solid #d7dbbb;
    }

    /* Bild 2 – Trennlinie links */
    #wechselmessersystem,
	#service-beratung{
        border-left: 1px solid #d7dbbb;
    }	
	
	#sichelgeometrie,
	#bewaehrte-sichelgeometrie,
	#fuer-produktion,
	#fuer-ihre-produktion{
		border-bottom: 1px solid #d7dbbb;
	}
	
	#bewaehrte-sichelgeometrie{
		border-right: none;
	}	
	

	
}


/* Tablet */

@media (max-width: 1100px) {

    .hero-benefits {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .hero-benefit {
        padding: 25px;
    }

    .hero-benefit::after {
        display: none;
    }

    .hero-benefit:nth-child(odd) {
        border-right: 1px solid rgba(255,255,255,.2);
    }

    .hero-benefit {
        border-bottom: 1px solid rgba(255,255,255,.2);
    }

    .hero-benefit:last-child {
        border-bottom: 0;
    }
}


/* Smartphone */

@media (max-width: 600px) {

    .hero-benefits {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .hero-benefit,
    .hero-benefit:nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.2);

        padding: 25px 10px;
    }

    .hero-benefit:last-child {
        border-bottom: 0;
    }

}



@media (max-width: 1300px){
	.hero-topheadline {
		width:50% !important;
		max-width:50% !important;
	}
}

@media (max-width: 1080px){
	.hero-topheadline {
		width:100% !important;
		max-width:100% !important;
	}
	
	.hero::before {
		content: none;		
	}
	
	.hero{
		background-image:none !important;
		background: #14243a !important;	
	}
	
	#anfrage-rechts {
		display:none;	
	}
	
	#anfrage-links {
		padding-left: 15px !important;
		width: 100%;
		padding-right: 30px;
	}
	
	
}

@media (max-width: 1024px){

    #problem-loesung,
	#leistungen,
	#unsere-leistungen,
	#vorteile{
        flex-direction: column;

    }
	
    #problem-loesung > div,
	#leistungen > div,
	#unsere-leistungen > div,
	#vorteile > div{
        width:100%;
    }	

}

@media (max-width: 991px){
	.site-header .menu > li:last-child	{
		margin-left:0 !important;
	}

	.site-header .menu > li:last-child	a{
		justify-content:left;
	}

	.site-navigation-dropdown ul.menu li.current-menu-item a {
		padding:20px;
	}

	.site-header .menu > li:not(:last-child) > a{
		display:block;	
	}
	
	.site-header .menu>li:last-child>a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		background: transparent;
		color: #55595c!important;
		border-radius: 0;
		font-size: 15px;
		font-weight: normal;
		text-decoration: none;
		transition: all .25s ease;
		margin-left: 0;
	}

		
}

@media (max-width: 899px) {
    .km-highlight {
        flex-direction: column;
    }
	
	.km-highlight .km-highlight-item{
		justify-content:left;	
	}
	
	.km-highlight .km-highlight-item::after{
		content:none;	
	}
	
    .km-highlight-text br {
        display: none;
    }

    .km-highlight-text br::after {
        content: " ";
    }	
}


/* ==========================================================
   Responsive Footer
========================================================== */

@media (max-width: 768px){

    .footer-contact{

        grid-template-columns:1fr;
        gap:25px;

        text-align:center;

    }

    .footer-item{

        display:flex;
        flex-direction:column;
        align-items:center;

    }

    .footer-item strong{

        margin-bottom:8px;

        font-size:18px;

    }

    .footer-item a,
    .footer-item span{

        line-height:1.6;

    }

}

@media (max-width: 600px){
	h1{
		font-size:30px !important;	
	}
	
	h2{
		font-size:26px !important;	
	}
	
	h3{
		font-size:22px !important;	
	}
	
    #hero-buttons{
        flex-direction: column;
        align-items: center;
        gap: 15px;

    }
	
	#hero-buttons .hero-btns:first-child{
		padding-right:0;
	}

}

@media (max-width: 480px){
	h1{
		font-size:24px !important;	
	}
	
	h2{
		font-size:20px !important;	
	}
	
	h2{
		font-size:17px !important;	
	}	
	
    #sichelgeometrie,
	#wechselmessersystem,
	#fuer-produktion,
	#service-beratung{
        display:none;
    }
	
	#bewaehrte-sichelgeometrie,
	#innovatives-wechselmessersystem,
	#fuer-ihre-produktion,
	#service-beratung-text{
		grid-column:1 / -1 !important;	
	}
	
	.footer-bottom{
		flex-direction:column;	
	}
	
	.footer-bottom > nav{
		margin-bottom:15px;
	}	
}