/* FillUp Tankstellen */


/* font-face 

font-family: "ubuntu", sans-serif;
font-weight: 400;
font-style: normal;

/* page */

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    background: var(--white) !important;
    word-wrap: break-word;
    font-family: "ubuntu", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: var(--black) !important;
    line-height: 1.3 !important;
    font-display: swap !important;
}


/* colors */

:root {
    --white: 255, 255, 255;
    --black: 30, 30, 28;
	--grey: 244, 244, 244;
    --dark: 219, 219, 219;
	--red: 212, 15, 20;
}

::selection {
    color: rgb(var(--black));
    background: rgb(var(--grey));
}

::-moz-selection {
    color: rgb(var(--wood));
    background: rgb(var(--beige));
}

.bg--grey {
    background-color: rgb(var(--grey));
}

.bg--red {
    background-color: rgb(var(--red));
}

.bg--white {
    background-color: rgb(var(--white)) !important;
}

.bg--black {
    background-color: rgb(var(--black)) !important;
}

.ctn__verlauf {
    position: relative;
    z-index: 100 !important;
}

.ctn__verlauf::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 110 !important;
}

.bg--dark {
    background-color: rgb(var(--dark)) !important;
}

.bg--red h1,
.bg--red h2,
.bg--red h3,
.bg--red h4,
.bg--red h5,
.bg--red p,
.bg--red a,
.bg--red h1,
.bg--red h2,
.bg--red h3,
.bg--red h4,
.bg--red p,
.f-white h1,
.f-white h2,
.f-white h3,
.f-white p,
.f-white,
.f-white a,
.f-white p a {
    color: rgb(var(--white)) !important;
}

.f-white a:hover,
.f-white p a:hover {
    color: rgb(var(--red)) !important;
}

#elementor-popup-modal-720 .f-white a:hover,
#elementor-popup-modal-720 .f-white p a:hover {
  color: rgb(var(--dark)) !important;
}

.f-red h1,
.f-red h2,
.f-red h3,
.f-red p,
.f-red,
.f-red a,
.f-red p a {
    color: rgb(var(--red)) !important;
}



/* spacings */

:root {
    --grid-gap: 30px;
    --m1: 8px;
    --m2: 16px;
    --m3: 24px;
    --m4: 32px;
    --m5: 48px;
    --m6: 64px;
    --m7: 80px;
    --m8: 96px;
    --m9: 120px;
    --m10: 160px;
    --m11: 192px;
}

@media (max-width: 1024px) {

    :root {
        --grid-gap: 15px !important;
        --m9: 96px;
        /* 192px */
        --m10: 96px;
        /* 160px */
        --m11: 120px;
        /* 192px */
    }
}


/* fluid spacings */

@media screen and (max-width: 575px) {

    :root {
        --m1: 4px;
        --m2: 8px;
        --m3: 16px;
        --m4: 24px;
        --m6: 56px;
        /* 64px */
        --m7: 64px;
        /* 80px */
        --m8: 64px;
        /* 96px */
        --m9: 80px;
        /* 120px */
        --m10: 80px;
        /* 160px */
        --m11: 80px;
        /* 192px */
    }
}

.gap {
    margin-top: var(--grid-gap);
}

.p-0 {
    padding: 0 !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-2 {
    padding-top: var(--m2) !important;
}

.pt-3 {
    padding-top: var(--m3) !important;
}

.pt-4 {
    padding-top: var(--m4) !important;
}

.pt-5 {
    padding-top: var(--m5) !important;
}

.pt-6 {
    padding-top: var(--m6) !important;
}

.pt-7 {
    padding-top: var(--m7) !important;
}

.pt-8 {
    padding-top: var(--m8) !important;
}

.pt-9 {
    padding-top: var(--m9) !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-gap {
    padding-bottom: var(--grid-gap) !important;
}

.pb-2 {
    padding-bottom: var(--m2) !important;
}

.pb-3 {
    padding-bottom: var(--m3) !important;
}

.pb-4 {
    padding-bottom: var(--m4) !important;
}

.pb-5 {
    padding-bottom: var(--m5) !important;
}

.pb-6 {
    padding-bottom: var(--m6) !important;
}

.pb-7 {
    padding-bottom: var(--m7) !important;
}

.pb-8 {
    padding-bottom: var(--m8) !important;
}

.pb-9 {
    padding-bottom: var(--m9) !important;
}

.prl-2 {
    padding-left: var(--m2) !important;
    padding-right: var(--m2) !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-9 {
    margin-top: var(--m9) !important;
}


.mb-0 {
    margin-bottom: 0 !important;
}

.mb-2 {
    margin-bottom: var(--m2) !important;
}

.mb-3 {
    margin-bottom: var(--m3) !important;
}

.mb-4 {
    margin-bottom: var(--m4) !important;
}

.mb-6 {
    margin-bottom: var(--m6) !important;
}

.mb-7 {
    margin-bottom: var(--m7) !important;
}

.mb-8 {
    margin-bottom: var(--m8) !important;
}

.mb-9 {
    margin-bottom: var(--m9) !important;
}

.mb-9c {
    margin-bottom: calc(var(--m9) - var(--grid-gap)) !important;
}

.mb-11 {
    margin-bottom: var(--m11) !important;
}

@media (max-width: 767px) {

    .m-gap {
        margin-top: var(--grid-gap) !important;
    }

    .mm {
        margin-top: var(--m5);
    }
}

@media (max-width: 575px) {

    .mm {
        margin-top: var(--m4);
    }
	
	.m--center {
		text-align: center !important;
	}
}


/* typography */

h1,
h2,
h3 {
    font-family: "ubuntu", sans-serif;
    font-weight: 700 !important;
    color: rgb(var(--black)) !important;
    line-height: 1.25 !important;
    font-display: swap !important;
}

h1 {
    text-transform: uppercase !important;
}

h2 {
    letter-spacing: 0.05em !important;    
}

h3 {
    letter-spacing: 0.025em !important;    
}

.mb-0 h1,
.mb-0 h2,
.mb-0 h3 {
    margin-bottom: 0 !important;
}

p,
ul,
li {
	font-family: "ubuntu", sans-serif;
	font-weight: 400;
	font-style: normal;
    color: rgb(var(--black)) !important;
    line-height: 1.7 !important;
    font-display: swap !important;
    letter-spacing: 0.025em !important;
}

p:last-child {
    margin-bottom: 0px;
}


/* fluid typography */

@media screen and (max-width: 375px) {

    .display h1 {
        font-size: 40px !important;
    }

    h1 {
        font-size: 32px !important;
    }

    h2 {
        font-size: 28px !important;
    }

    h3,
    h5 {
        font-size: 22px !important;
    }

    .intro p {
        font-size: 22px !important;
    }

    body,
    p {
        font-size: 16px !important;
    }
	
}

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

    .display h1 {
        font-size: calc(40px + 56 * ((100vw - 376px) / 624)) !important;
    }

    h1 {
        font-size: calc(20px + 28 * ((100vw - 376px) / 624)) !important;
    }

    h2 {
        font-size: calc(24px + 4 * ((100vw - 376px) / 624)) !important;
    }

    h3,
    h5 {
        font-size: calc(22px + 3 * ((100vw - 376px) / 624)) !important;
    }

    .intro p {
        font-size: calc(22px + 6 * ((100vw - 376px) / 624)) !important;
    }

    body,
    p {
        font-size: calc(16px + 5 * ((100vw - 376px) / 624)) !important;
    }
	
}

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

    .display h1 {
        font-size: 80px !important;
    }

    h1 {
        font-size: 64px !important;
    }

    h2 {
        font-size: 47px !important;
    }

    h3,
    h5 {
        font-size: 24px !important;
    }

    .intro p {
        font-size: 28px !important;
    }

    body,
    p {
        font-size: 20px !important;
    }
    
    footer p {
        font-size: 16px !important;
    }
    
    .f-sternchen,
    .f-sternchen p {
        font-size: 12px !important;
    }

}


/* container */

:root {
    --container-width: 100%;
}

@media (min-width: 1500px) {

    :root {
        --container-width: 1440px;
    }
}

@media (min-width: 1200px) and (max-width: 1499px) {

    :root {
        --container-width: 1140px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {

    :root {
        --container-width: 960px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    :root {
        --container-width: 720px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {

    :root {
        --container-width: 540px;
    }
}

.elementor-section.elementor-section-boxed>.elementor-container:not(.elementor-section .elementor-section .elementor-container) {
    width: 100%;
    max-width: var(--container-width);
}


/* sections */

.site-header,
#ast-mobile-header,
.post-navigation,
.site-footer {
    display: none !important;
}

header .header {
    background: rgb(var(--white)) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1) !important;
    height: 80px !important;
    position: fixed !important;
    top: 0 !important;
    width: 100vw !important;
    z-index: 9000 !important;
}

.right_red {
    position: relative;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    background: rgb(var(--red)) !important;
}

@media (max-width: 768px) {
        .right_red {
            clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
            margin-top: -35px !important;
        }
}

.image_left {
    max-height: 720px !important;
}

@media (max-width: 768px) {
        .image_left {
            max-height: 320px !important;
        }
}

.teaser__usp .arrow-right svg {
    transition: transform 0.3s ease;
}

.teaser__usp:hover .arrow-right svg {
    transform: translateX(3px);
}

.teaser__usp .elementor-heading-title {
    transition: all .3s ease !important;
}

.teaser__usp:hover .elementor-heading-title {
    color: rgb(var(--red)) !important;
    transition: transform 0.3s ease;
}

/* a */

p a,
a {
    color: rgb(var(--black)) !important;
    text-decoration: none !important;
}

p a:hover,
a:hover {
    text-decoration: none !important;
}


/* grid */

.img-ratio--16-9 .elementor-image {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 56.25% !important;
    text-align: left;
}

.img-ratio--16-11 .elementor-image {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 68.75% !important;
    text-align: left;
}

.img-ratio--16-12 .elementor-widget-container {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 75% !important;
    text-align: left;
}

.img-ratio--16-15 .elementor-image {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 93.75% !important;
    text-align: left;
}

.img-ratio--16-17 .elementor-widget-container {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 106.25% !important;
    text-align: left;
}

.img-ratio--16-18 .elementor-image {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 112.5% !important;
    text-align: left;
}

.img-ratio--16-20.elementor-widget-image {
    width: 100% !important;
    position: relative !important;
    padding-bottom: 125% !important;
    text-align: left;
}

.img-ratio .elementor-widget-container,
.img-ratio .elementor-image {
    height: 100% !important;
}

.img-ratio img {
    position: absolute !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

.img-ratio a {
    display: unset !important;
}


/* button */

.elementor-button {
    font-family: "ubuntu", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    font-size: 16px !important;
    padding: 8px 24px !important;
    border-radius: 0 !important;
    border-radius: 5px !important;
    border-width: 0px !important;
    border-style: solid !important;
    height: 47px;
    min-width: 210px;
    display: flex;
    width: fit-content !important;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.elementor-button:hover {
    text-decoration: none !important;
}

@media (max-width: 1024px) {
    .elementor-button {
        font-size: 15px !important;
        padding: 13px 24px !important;
    }   
}

@media (max-width: 768px) {
      .elementor-button {
        font-size: 15px !important;
        padding: 9px 24px !important;
      }
}

#btn__red {
    color: rgb(var(--white)) !important;
    border: none !important;
    display: inline-block;
    background-color: rgb(var(--red)) !important;
    transition: all .3s ease;
}

#btn__red span {
    font-family: "ubuntu", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.9 !important;
    font-size: 16px !important;
}

#btn__red:hover {
    color: rgba(var(--white), 0.5) !important;
}

#btn__white {
    color: rgb(var(--red)) !important;
    border: none !important;
    display: inline-block;
    background-color: rgb(var(--white)) !important;
    transition: all .3s ease;
}

#btn__white span {
    font-family: "ubuntu", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.9 !important;
    font-size: 16px !important;
}

#btn__white:hover {
    color: rgba(var(--red), 0.5) !important;
}

#btn__white-outlined {
    color: rgb(var(--white)) !important;
    border: 2px solid rgb(var(--white)) !important;
    display: inline-block;
    padding: 7px 24px !important;
    background-color: transparent !important;
    transition: all .3s ease;
}

#btn__white-outlined:hover {
    color: rgba(var(--white), 0.5) !important;
}

/* navigation */

nav ul li a.menu-link {
    font-family: "ubuntu", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    color: rgb(var(--black)) !important;
}

nav ul li a.menu-link.elementor-sub-item {
    font-family: "ubuntu", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    text-transform: none !important;
    color: rgb(var(--black)) !important;
}

nav ul li a.menu-link:hover,
nav ul li a.menu-link.elementor-sub-item:hover {
    font-family: "ubuntu", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    color: rgb(var(--red)) !important;
}

nav ul li ul.sub-menu {
    background: rgb(var(--white)) !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 8px !important;
}

.elementor-sub-item:hover {
    background-color: rgb(var(--grey)) !important;
    color: #fff;
}

.elementor-sub-item:focus,
.elementor-sub-item:visited,
.elementor-sub-item:target {
    background: rgb(var(--grey)) !important;
    color: rgb(var(--red)) !important;
    transition: all .3s ease !important;
    text-align: left !important;
}

.elementor-nav-menu--main .menu-item.current-menu-item > a.elementor-sub-item {
    background: rgb(var(--grey)) !important;
    box-shadow: none !important;
}

.elementor-nav-menu--main > ul > li.current-menu-item > a,
.elementor-nav-menu--main > ul > li.current-menu-ancestor > a,
.elementor-nav-menu--main > ul > li > a.elementor-item-active {
    color: rgb(var(--red)) !important;
}

.elementor-nav-menu--main > ul > li > a {
    transition: none;
}

.elementor-nav-menu--main > ul > li > a:hover {
    transition: color 0.3s ease;
}

/* Wasch Accordion */

h3.ue_title {
    font-family: "ubuntu", sans-serif;
    font-weight: 700 !important;
    color: rgb(var(--black)) !important;
    line-height: 1 !important;
    font-display: swap !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h3.ue_title span {
    margin-left: auto;
}

.uc_trigger {
  display: flex;
  align-items: stretch;
}

.uc_trigger .ue_title {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.uc_trigger .ue_expand {
    width: 48px;
    background-color: rgb(var(--red)) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 125px !important;
}


.uc_trigger .ue_expand i {
  color: #fff;
}

/* Content vorbereiten */
.uc_content {
  position: relative;
  padding: 20px 64px 20px 20px !important; /* rechts Platz für roten Balken */
  box-sizing: border-box;
}

/* Roter Balken rechts im geöffneten Content */
.uc_content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  background: rgb(var(--red)) !important;
}

/* optional: Content-Absätze ohne Extra-Abstand unten */
.uc_content p:last-child {
  margin-bottom: 0;
}

/* Formular */

/* Formular allgemein */
.elementor-form {
  font-family: 'Ubuntu', sans-serif;
}

/* Feldgruppen */
.elementor-form .elementor-field-group {
  margin-bottom: 20px;
}

/* Labels oben */
.elementor-form .elementor-field-label {
  display: block;
  margin-bottom: 8px !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #000;
}

/* Eingabefelder */
.elementor-form .elementor-field.elementor-field-textual,
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="date"],
.elementor-form textarea,
.elementor-form select {
  width: 100%;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #000;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgb(var(--dark)) !important; /* feine Linie */
  border-radius: 0;
  padding: 10px 0 8px 0;
  box-shadow: none;
}

/* Fokus */
.elementor-form .elementor-field.elementor-field-textual:focus,
.elementor-form input[type="text"]:focus,
.elementor-form input[type="email"]:focus,
.elementor-form input[type="date"]:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
  outline: none;
  border-bottom: 1px solid #000;
  box-shadow: none;
}

/* Placeholder */
.elementor-form ::placeholder {
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

/* Checkbox-Bereich linksbündig */
.elementor-form .elementor-field-type-acceptance .elementor-field-subgroup {
  margin-top: 10px;
}

.elementor-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Checkbox */
.elementor-form .elementor-acceptance-field {
  margin: 3px 10px 0 0; /* 10px Abstand zur Erklärung */
  flex: 0 0 auto;
}

/* Text neben Checkbox */
.elementor-form .elementor-field-type-acceptance label {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  text-align: left;
}

/* Button-Container links */
.elementor-form .e-form__buttons {
  justify-content: flex-start;
}

/* Button links */
.elementor-form #btn__red {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

/* Optional: Mobile 2-spaltig auf 1-spaltig */
@media (max-width: 767px) {
  .elementor-form .elementor-col-50,
  .elementor-form .elementor-col-100 {
    width: 100%;
  }
}

/* Mobil Menü */

.uc_animated_hamburger_icon {
    background-color: transparent !important;
    padding: 0;
    border-radius: 0px;
    text-align: center;
    height: 64px !important;
    width: 64px !important;
}

#uc_animated_hamburger_icon_elementor_5c420ac.uc_animated_hamburger_icon_holder {
    top: 0px;
    right: 10px;
    z-index: 10000 !important;
}

#elementor-popup-modal-720 {
    z-index: 8500 !important;
}