/**
Theme Name: Mea IT Services Astra
Author: mea IT Services e.U.
Author URI: https://mea-it.services
Description: Child Theme of Astra WP developed by mea IT Services e.U.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mea-it-services-astra
Template: astra
*/

html {
	overflow-x: hidden;
}

#primary {
	background-color: white;
}

body {
	background-color: #efefef !important;
}

a {
	color: inherit;
}

/* Focus visible */
.ast-search-menu-icon.slide-search a:focus-visible:focus-visible, .astra-search-icon:focus-visible, #close:focus-visible, a:focus-visible, .ast-menu-toggle:focus-visible, .site .skip-link:focus-visible, .wp-block-loginout input:focus-visible, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, .ast-header-navigation-arrow:focus-visible, .ast-orders-table__row .ast-orders-table__cell:focus-visible, a#ast-apply-coupon:focus-visible, #ast-apply-coupon:focus-visible, #close:focus-visible, .button.search-submit:focus-visible, #search_submit:focus, .normal-search:focus-visible, .ast-header-account-wrap:focus-visible, .astra-cart-drawer-close:focus, .ast-single-variation:focus, .ast-button:focus, .ast-builder-button-wrap:has(.ast-custom-button-link:focus), .ast-builder-button-wrap .ast-custom-button-link:focus
{
	outline-width: 2px !important;
	outline-color: black !important;
}

footer *:focus-visible,
.site-header *:not(.sub-menu .menu-item > a):focus-visible
{
	outline-color: white !important;
}

/* Container Breite (main content)*/
.ast-container {
    max-width: var(--wp--custom--ast-content-width-size) !important;
}

/* Logo */

.custom-logo {
    height: 140px;
    margin-bottom: -77px;
}

/*Buttons (homepage) full width*/
.uagb-buttons__outer-wrap .uagb-buttons__wrap.uagb-buttons__wrap {
    display: block;
}

/*Buttons (homepage) area "Dein Projekt, unser Service"*/
.button-homepage {
    display: flex;
    justify-content: center;
}

/* Buttons in columns */
.col-btn .uagb-buttons__wrap,
.col-btn .uagb-buttons__outer-wrap,
.col-btn .uagb-button__wrapper 
{
	height: 100%;
}

/* Footer */
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
    padding-left: 0px;
    padding-right: 0px;
}

.ast-container,
.ast-container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.footer-logo img {
	aspect-ratio: auto 220 / 111;
}

/* Links */

#content .no-link-decoration a,
footer .no-link-decoration a 
{
    text-decoration: none !important;
}

footer .no-link-decoration a:hover {
	text-decoration: underline !important;
}

#content a:not(.wp-block-button__link):not(.uagb-tabs-list),
#content a:not(.wp-block-button__link):not(.uagb-tabs-list):hover,
footer a:not(.wp-block-button__link),
footer a:not(.wp-block-button__link):hover
{
    text-decoration: underline;
}

footer a:not(.wp-block-button__link):hover,
#content a:not(.wp-block-button__link):hover 
{
    font-weight: 600;
}

footer a,
#content a
{
    transition: all .1s ease-in-out !important;
}

.wp-block-social-links {
    gap: 10px;
}

.wp-block-social-link-anchor {
    transition: all 200ms ease-out !important;
}

/* Images */

.zoom-on-hover a:hover {
    transform: scale(1.1);
}

.zoom-on-hover a {
    transition: transform 200ms ease-out;
}

/* ------------------------------- Header ----------------------- */

@media only screen and (min-width: 961px) {
    .ast-grid-right-section {
        justify-content: flex-start;
    }
}

.site-header-section
{
    max-height: 80px;
}

#ast-desktop-header .site-primary-header-wrap {
	max-width: var(--wp--custom--ast-content-width-size) !important;
    padding-left: 4em !important;
    padding-right: 4em !important;
    margin-left: auto;
    margin-right: auto;
	background-color: rgba(0, 0, 0, .56);
}

.ast-primary-header-bar {
	background-color: transparent !important;
	box-shadow: none !important;
}

#ast-desktop-header .ast-primary-header {
	padding: 0 !important;
}

.ast-builder-grid-row {
    grid-template-columns: 25% auto;
}


svg.ast-arrow-svg {
    transition: transform 250ms ease-out 300ms !important;
    overflow: visible;
}

.menu-link:hover svg.ast-arrow-svg {
    transform: rotateX(180deg);
}

svg.ast-arrow-svg path {
    d: path("M 57.5 38.193 l 14 14 l 14 -14 l -2 -2 l -12 12 l -12 -12 L 57.5 38.193 Z");
}

.site-header-section .ast-builder-menu,
.site-header-section .ast-main-header-bar-alignment,
.site-header-section .main-navigation,
.site-header-section .main-header-menu
{
    width: 100%;
}

.site-header-section .main-header-menu {
    justify-content: space-between;
}

.menu-link:hover {
    font-weight: 600 !important;
}

.site-header-section .main-header-menu .sub-menu {
    left: 50% !important;
    transform: translate(-50%) !important;
    font-size: 14px !important;
    text-align: center;
    padding: 15px;
}

#ast-fixed-header .sub-menu,
.site-header-section .main-header-menu .sub-menu,
.site-header-section .main-header-menu .sub-menu::before 
{
    background-color: rgba(255,255,255,0.8);
}

.site-header-section .main-header-menu .sub-menu .menu-link {
    padding: 4px;
    font-weight: 500;
}

.site-header-section .main-header-menu .sub-menu .menu-link:hover {
    padding: 4px;
}

.site-header-section .main-header-menu .sub-menu::before {
    position: absolute;
    content: '';
    top: -20px !important;
    height: 20px !important;
    width: 100px !important;
    left: calc(50% - 50px) !important;
    clip-path: path("M 2,20 L 110,25 L 50,0 Z") !important;
    -webkit-clip-path: path("M 2,20 L 110,25 L 50,0 Z") !important;
    transform: translateY(0) !important;
}

.menu-link {
    transition: font-weight .1s ease-in-out !important;
}

.ast-sticky-active .main-header-menu > .menu-item.current-menu-item > .menu-link, .ast-sticky-active .main-header-menu >.menu-item.current-menu-ancestor > .menu-link, .main-header-bar.ast-sticky-active .main-header-menu > .menu-item.current-menu-item > .menu-link, .main-header-bar.ast-sticky-active .main-header-menu >.menu-item.current-menu-ancestor > .menu-link {
    color: white;
}

@media only screen and (min-width: 1200px) {
	.header-img {
	    aspect-ratio: auto 2560 / 1200;
	}
}

@media only screen and (max-width: 1200px) {
	.header-img {
	    aspect-ratio: auto 1500 / 1150;
    }
}

/* Mobile menu */

#ast-hf-mobile-menu a {
    font-weight: 500;
}

#ast-hf-mobile-menu > .menu-item > .menu-link {
    padding-left: 0;
    padding-right: 0;
}

#ast-hf-mobile-menu .sub-menu {
    display: block;
    background-color: transparent;
}

#ast-hf-mobile-menu .sub-menu .menu-link {
    font-size: 14px;
    line-height: 1.625;
    padding: 2px 0 2px 10px;
}

#ast-hf-mobile-menu .sub-menu .menu-link:hover {
    color: black;
}

#ast-hf-mobile-menu .ast-menu-toggle,
#ast-hf-mobile-menu .sub-menu .menu-link .icon-arrow 
{
    display: none;
}

.ast-mobile-popup-inner {
    padding: 2em 2em;
}

#menu-toggle-close {
    padding: 0;
}

#menu-toggle-close .ast-close-svg,
#menu-toggle-close
{
    width: 35px;
    height: 35px;
}

.ast-mobile-popup-header {
    min-height: unset !important;
    height: 35px;
}

#menu-toggle-close .ast-close-svg path {
    d: path("M 5.293 6.707 l 5.293 5.293 l -5.293 5.293 c -0.235 0.235 -0.235 0.614 0 0.848 s 0.614 0.235 0.848 0 l 5.293 -5.293 l 5.293 5.293 c 0.235 0.235 0.614 0.235 0.848 0 s 0.235 -0.614 0 -0.848 l -5.293 -5.293 l 5.293 -5.293 c 0.235 -0.235 0.235 -0.614 0 -0.848 s -0.614 -0.235 -0.848 0 l -5.293 5.293 l -5.293 -5.293 c -0.235 -0.235 -0.614 -0.235 -0.848 0 s -0.235 0.614 0 0.848 z");
}

/* -------------------------------- schwarze Trennlinie mit Kugel am Ende ------------------------------------- */

/* black seperator line with align left and dot on the right end */
.custom-hr {
  height: 1px !important;
  background-color: black;
}

.custom-black-line.align-left {
    margin-right: auto;
    display: block;
}

.custom-black-line.align-left::before {
  --dot: 8px; 
  content: "";
  position: absolute;
  top: 50%;
  right: calc(0px - -3em - var(--dot));
  width: var(--dot);
  height: var(--dot);
  transform: translateY(-50%);
  border-radius: 50%;
  background: black;
  border: 1px solid black;
}

/* black seperator line with align right and dot on the left end */
.custom-black-line.align-right {
    margin-left: auto;
    display: block;
}

.custom-black-line.align-right::after {
  --dot: 8px; 
  content: "";
  position: absolute;
  top: 50%;
  left: calc(0px - -3em - var(--dot));
  width: var(--dot);
  height: var(--dot);
  transform: translateY(-50%);
  border-radius: 50%;
  background: black;
  border: 1px solid black;
}

/* -------------------------------- InfoBox (Homepage) ------------------------------------- */

.info-columns-with-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/*.uagb-ifb-button-wrapper.wp-block-button {
    display: block !important;       
    width: 100% !important; 
    margin: 0 1em 1em 1em !important;
}*/ 

.uagb-ifb-button-wrapper a {
    display: block !important;
    width: 100% !important;
    text-align: center;
}

/* Scroll to top */

#ast-scroll-top {
	border: solid 2px #404040;
	transition: all 150ms ease-out;
}

#ast-scroll-top .ast-arrow-svg {
	width: .6em !important;
}

/* RAL Colors */

#ral-tabs > ul {
	display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    width: 100%;
    grid-auto-flow: dense;
}

.uagb-tabs__panel li a {
	width: 100%;
}

@media only screen and (min-width: 990px) and (max-width: 1272px) {
    #ral-tabs > ul {
        grid-template-columns: repeat(3, minmax(100px, 1fr));
    }	
}

@media only screen and (min-width: 767px) and (max-width: 990px) {
    #ral-tabs > ul {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }	
}

@media only screen and (max-width: 767px) {
    #ral-tabs > ul {
        grid-template-columns: repeat(1, minmax(100px, 1fr));
    }	
}

/* Leistungen */

.contact-person-container a:hover,
.contact-person-container a:focus 
{
	color: white !important;
}

/* ----------------------------------------Responsive ---------------------------------------------------------*/

.ast-separate-container .entry-content > .alignfull, .ast-separate-container .entry-content[data-ast-blocks-layout] > .alignwide, .ast-plain-container .entry-content[data-ast-blocks-layout] > .alignwide, .ast-plain-container .entry-content .alignfull {
    margin-left: 0px;
    margin-right: 0px;
}

.minka-responsive-mobile {
	display: none;
}

/* Responsive Tablet */

@media only screen and (max-width: 960px) {
    .custom-black-line.align-left {
        margin-left: -20px;
    }

    .custom-black-line.align-right {
        margin-right: -20px;
    }

    /*black line width dot on the end of it*/
    .custom-black-line.align-left::before {
        right: calc(0px - -0.5em - var(--dot));
    }

    .custom-black-line.align-right::after {
        left: calc(0px - -0.5em - var(--dot));
    }

    .custom-logo {
        height: 70px;
        margin-bottom: 0;
        width: auto !important;
    }

    .ast-button-wrap .menu-toggle.main-header-menu-toggle {
        padding: 0 !important;
    }
}

@media only screen and (min-width: 640px) and (max-width: 960px) {
    .footer-logo-container .wp-block-uagb-image {
        width: calc(50% - 1em) !important;
    }

    .footer-logo-container .wp-block-uagb-image img {
        width: 100% !important;
    }
	
	footer .footer-logo-container {
        display: flex;
        flex-direction: row !important;
        gap: 2em !important;
        flex-wrap: wrap !important;
    }
}

/* Responsive Mobile Portrait */

@media only screen and (max-width: 640px) {
    .custom-black-line.align-left {
        margin-left: 0px;
    }

    .footer-logo-container .wp-block-uagb-image {
        margin-top: -1em;
    }

    .footer-logo-container .wp-block-uagb-image:first {
        margin-top: 0;
    }

    .footer-logo-container .wp-block-uagb-image img {
        width: 70% !important;
        margin-left: auto;
        margin-right: auto;
    }
	
	.footer-logo {
	    padding-bottom: 20px;
    }
	
	.minka-responsive-mobile {
        display: block !important;
    }
}

/* Responsive Mobile Landscape */

@media only screen and (max-height: 450px) and (max-width: 950px) {
    .minka-responsive-mobile {
        display: block !important;
    }
	
	.minka-responsive-tablet-desktop {
		display: none !important;
	}
	
	
    .header-img {
	    height: 90vh;
        aspect-ratio: auto;
    }
}

@media only screen and (min-height: 450px) and (min-width: 950px) {
	.minka-responsive-tablet-desktop {
		display: block !important;
	}
}