/* Template © admotion*/


html 
{
   height:			100%;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
   font-family:		'Quicksand', sans-serif;
   font-weight:		400;
   font-size:		16px;
   color:			white;
   line-height:		145%;
   letter-spacing:	0.02em;
    background: var(--braun);
}


#system-message { margin: 0px; }
/* bootstrap import */

img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;}
.nav > li > a {display: block;}
li { line-height: normal;}
.nav {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ul.unstyled, ol.unstyled { list-style: none;}
.visually-hidden {display: none;}
* {box-sizing: border-box;}
/* ---------------------------------- */


:root {
  --gelb: #ffd600;
  --gruen: #4d4100;
  --braun: #b28a24;
}

    #desktop { display: none; }
    #mobile { display: block; }   



header { width: 100%; position: relative; padding: 10px 5%; background: var(--braun); display: flex; justify-content: space-between; align-items: center;}

#logo-mobile { width: 56px; }
#logo { width: 300px; display: none;}


#kontakticons {transition: 0.2s; padding-right: 62px; position: relative; z-index: 900;}
#kontakticons img {padding: 10px; background: white; border-radius: 100%; width: 42px; margin-left: 20px; transition: 0.2s;}
#kontakticons img:hover {padding: 5px; background: var(--gruen); border-radius: 10px;}


#zoe {width: 70px; position: absolute; right: 0; margin-top: -50px; z-index: 10; opacity: 0.3;}

#inhalt { width: 90%; margin: 40px auto 120px; position: relative; z-index: 900;}
#home #inhalt {margin-bottom: 80px;}


#showbox  {  width: 100%; }

.oeffnungszeiten {background: var(--gruen) url(/images/icons/time.svg) no-repeat left 10px center; padding: 10px; padding-left: 45px; display: inline-block; background-size: 24px;}


.box {background: var(--gruen); padding: 25px;}


.info {padding: 10px; background: var(--gelb); border-radius: 100%; width: 42px; margin-right: 20px; transition: 0.2s;}



/*------ aktuelles --------*/

.blog-items {
  display: flex;
  flex-wrap: wrap;
  gap: 25px; /* Abstand zwischen den Spalten/Zeilen */
}

.blog-item {
  flex: 1; /* 3 Spalten mit Lücke */
  box-sizing: border-box;
  background: var(--gruen);
  padding: 25px;
}
.blog-item a { color: white;}

.published {margin: 0; font-size: 14px;}
.article-info {margin: 10px 0;}

/*------ aktuelles home teaser --------*/

#aktuelles-container { width: 100%; margin: 80px auto; position: relative; z-index: 900; padding: 150px 5% 0; background: url(/images/Zentrum/shopping.jpg) no-repeat top left; background-size: 80%; }

#aktuelles-teaser {background: var(--gruen); padding: 25px; margin-bottom: 25px;}
#aktuelles-teaser h2 { display: flex; gap: 10px; align-items: center;}
#aktuelles-teaser h2::before {content: ''; ; background: var(--gelb) url(/images/icons/aktuelles.svg) no-repeat center center; background-size: 24px; width: 42px; height: 42px; border-radius: 100%;  }
#aktuelles-teaser h3 a {color: white;}
#aktuelles-teaser ul.mod-articles-items {padding: 0; margin: 0;}
#aktuelles-teaser ul.mod-articles-items li {list-style: none;}

.readmore a { background: var(--gelb); font-size: 16px; padding: 10px 50px; font-family: 'GeometosSoft'; color: black; transition: 0.2s; display: inline-block; margin-top: 25px; line-height: 29px;}
.readmore a:hover { background: white; color: var(--gruen); font-size: 18px; padding: 10px 37px;}


#standort {
  aspect-ratio: 1 / 1;
  width: 100%;
  position: relative;
}
#standort * {
  aspect-ratio: 1 / 1;
  width: 100%;
  position: relative;
}
#standort iframe {
  width: 100%;
  height: 100%;
  border: none;
}



/*------ geschäfte karussel home --------*/
#geschaefte-logos {margin: 80px 0;}
.logo-carousel {
  width: 100%;
  overflow: hidden;
  height: auto;
  position: relative;
}

.logo-track {
  display: flex;
  gap: 25px;
  animation: scrollLoop 40s linear infinite;
  width: max-content;
    margin-bottom: 25px;
}
.logo-track2 {
  display: flex;
  gap: 25px;
  animation: scrollLoop2 40s linear infinite;
  width: max-content;
}
#tinymce .logo-track, #tinymce .logo-track2 {animation: none;}
#tinymce .logo-carousel {overflow: scroll;}

.logo-track img, .logo-track2 img {
  height: 50px;  width: auto; transition: 0.2s ease;
  flex-shrink: 0;
  object-fit: contain;
}
.logo-track img:hover, .logo-track2 img:hover {transform: scale(1.1);}
    
/* Loop via transform trick: Das Band wird doppelt dargestellt */
@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}/* Loop via transform trick: Das Band wird doppelt dargestellt */
@keyframes scrollLoop2 {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}






/*------ parking info home --------*/

#parking-info { width: auto; padding: 250px 5% 150px; position: relative; z-index: 900;}
#parking-info .moduletable { position: relative; z-index: 900; padding: 25px; background: var(--gruen);}
#parking-info::before {content: ''; background: url(/images/Zentrum/Zentrum-Oberengstringen.jpg) no-repeat; background-size: cover; position: absolute; width: 90%; height: 400px; z-index: -1; top: 80px; right: 0;}

#parking-info h2 { display: flex; gap: 10px; align-items: center;}
#parking-info h2::before {content: ''; ; background: var(--gelb) url(/images/icons/parking.svg) no-repeat center center; background-size: 24px; width: 42px; height: 42px; border-radius: 100%;  }

#parking-info a.button:hover {background: white; color: var(--gruen);}








/*------ footer --------*/

footer  { width: 100%; background: var(--gruen); color: white; padding: 50px 5%; position: relative; }
footer a { color: white; }
#footer-container  {  width: 90%; margin: 0 auto; }

footer::before {
  content: '';
  position: absolute;
  top: -17px;
  left: 0;
  height: 17px; /* Höhe der "Border" */
  width: 100%;
  background: linear-gradient(to right, var(--gelb) 66.66%, white 66.66%);
}
#cart-container {width: 100%; position: absolute; top: -127px; height: 150px; overflow: hidden; left: 0;}
#cart {width: 100px; height: 150px; animation: cart 10s infinite linear; position: relative;}
#cart iframe {width: 100%; height: 100%;}

@keyframes cart {
  0%   { left: -150px; transform: scaleX(1); }
  48%  { left: 100%;  transform: scaleX(1); }
  52%  { left: 100%;  transform: scaleX(-1); }
  100% { left: -150px; transform: scaleX(-1); }
}


footer a.button { background: var(--gelb); font-size: 16px; font-weight: 700; padding: 10px; font-family: 'Quicksand'; color: black; transition: 0.2s; display: inline-block; line-height: 1.2;}
footer a.button:hover { background: white; color: var(--gruen); font-size: 16px; padding: 10px;}




/*------ fonts & styles --------*/

h1 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 30px; line-height: 130%; font-weight: 900; font-family: 'GeometosSoft';}
h2 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 22px; line-height: 130%; font-weight: 900; font-family: 'GeometosSoft';}
h3 { margin: 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 700; }


a { text-decoration: none; outline: none; color: white;  }
a:hover { text-decoration: none; color: var(--gelb); }
a:focus { text-decoration: none; outline: none; }

a.button { background: var(--gelb); font-size: 16px; padding: 10px 50px; font-family: 'GeometosSoft'; color: black; transition: 0.2s; display: inline-block;}
a.button:hover { background: var(--gruen); color: var(--gelb); font-size: 18px; padding: 10px 37px;}

p {margin: 0; }



hr {margin: 40px 0; border-top: 0; border-bottom: 2px solid var(--gelb); }



table.linie {width: 100%;}
table.linie td {padding: 5px; border-bottom: 1px solid var(--gelb);}






#webdesign  { margin-top:0px; background: var(--gelb) url(../images/webdesign-admotion.png); position: absolute; right: 0px; width: 25px; height: 91px;}
#webdesign p  { margin: 0px; }
#webdesign a  { width: 25px; height: 91px; display: block; }


.clear { line-height: 0; }

#scrollup {
    display: none; transition: 0.2s ease;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 990;
    border: none;
    outline: none;
    background-color: var(--gruen);
    color: white;
    cursor: pointer;
    padding: 7px 2px;
    width: 30px; border-radius: 30px;
}
#scrollup:hover { background-color: var(--gelb); border-radius: 10px;}



@media(min-width:460px){
    
}


@media(min-width:660px){

}


@media(min-width:768px){
#desktop { display: block; }
#mobile { display: none; }

#logo-mobile { display: none}
#logo { display: block;}    
    
    #zoe {width: 100px; margin-top: -70px; opacity: 0.3;}


}

@media(min-width:1000px){

    body {font-size: 18px;}
    h1 {font-size: 60px;}
    h2 {font-size: 24px;}
    h3 {font-size: 22px;}
    
    
    #aktuelles-container { width: calc(100% - 160px); margin: 80px; position: relative; z-index: 900; padding: 250px 5% 0px; background: url(/images/Zentrum/shopping.jpg) no-repeat top left; background-size: 50%; display: flex; gap: 25px;}
    #aktuelles-teaser { margin: 0;}
    #standort {max-width: 350px;}
    
    
    .logo-track { gap: 40px; margin-bottom: 40px;}
    .logo-track2 { gap: 40px; }
    .logo-track img, .logo-track2 img { height: 80px; }

        #parking-info .moduletable { padding: 40px;}

    hr {margin: 80px 0; }

}



@media(min-width:1250px){
      header {padding: 20px 40px;}

    #kontakticons {padding-right: 0;}
    .scrolled #kontakticons {position: fixed; top: 20px; right: 20px;}
    
    #inhalt { width: 1200px; margin: 150px auto 200px;  }
    #home #inhalt { margin-bottom: 150px;  }
    
    
    footer {padding: 80px 0;} 
    #footer-container  {  width: 1200px; margin: 0 auto; }

    .box { padding: 40px; hyphens: auto;}

     #aktuelles-teaser { padding: 40px;}
    
    #cart-container { top: -144px;}
    #cart {width: 150px; animation: cart 20s infinite linear; position: relative;}
    
    #aktuelles-container { width: calc(100% - 160px); margin: 80px; position: relative; z-index: 900; padding: 40px 80px 150px 350px; background: url(/images/Zentrum/shopping.jpg) no-repeat top left; background-size: 500px; display: flex; gap: 25px;}

    
    .blog-item { flex: 1 1 calc(33.333% - 40px); padding: 40px; }

    #parking-info { width: auto; padding: 300px calc(50% - 600px) 80px; position: relative; z-index: 900; margin-bottom: 200px;}
    #parking-info .moduletable { width: 350px;}
    #parking-info::before { width: 90%; height: 100%; z-index: -1; top: 0px; right: 0;}

    
    
}

@media(min-width:1550px){
      body {font-size: 20px;}
        #zoe {width: 120px; margin-top: -120px; opacity: 1;}

}

@media(min-width:1850px){
     #zoe {width: 166px; margin-top: -185px;}
    
    #aktuelles-container { width: calc(100% - 300px); margin: 80px 150px; }

}