/* =ipad =1024 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1280px){
    
.grid, #head, #tiles { padding: 0 10px !important;}

.column, .columns{padding: 0 15px;}

iframe{max-width: 100%;}

}


/* =ipad =768 
------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px){
    
:root {
    --font-normal: 16px;
    --font-medium: 14px;
    --font-small: 13px;
    --font-h1: 34px;
    --font-h2: 26px;
    --font-h3: 20px;
    --font-h4: 18px;
    --font-h5: 16px;
    --radius-std: 15px;
}
    
.mobile-only {display: block;}
.desktop-only, .mobileoff, .nomobile {display: none;}




/* general */

.grid, #head, #tiles { padding: 0 10px !important;}
    
.grid {display: grid; grid-gap: 10px;}
.grid-gapless {display: grid; grid-gap: 0px;}
    
.grid-1-1, .grid-2-1, .grid-3-1,.grid-4-1 {grid-template-columns: repeat(1, 1fr);}
.grid-2-2, .grid-3-2,.grid-4-2 {grid-template-columns: repeat(2, 1fr);}
.grid-3-3,.grid-4-3 {grid-template-columns: repeat(3, 1fr);}

.grid-center {align-items: center;}
.margin-30 {margin: 30px;}
    
.grid-2-1 .image-left {margin-left: 0; margin-top: 10px;}
.grid-2-1 .image-left img {height: 35vh; border-radius: var(--radius-std);}
.grid-2-1 .content {padding: 0px;}
    
.merge_2-3 {grid-column: auto;}

table {width: 100%; margin: 20px 0;}
iframe {max-width: 768px;}
.column, .columns {padding: 0 10px;}
    
/* header */   
.site-header {padding: 0px 10px;}
.logo {height: 100px; margin: 20px 0px;}

    
/* navigation menu */   
.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 65vh;
    background: rgba(255, 255, 255, 1);
    display: block;
    padding: 30px;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transform: translateY(-100%);
    visibility: visible;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.main-navigation.is-open {transform: translateY(0); visibility: visible;}
    
nav ul {display: block;}
nav ul li {display: block;}
nav ul li a {font-size: var(--font-h2);}
    
.menu-toggle svg, .search-trigger svg {
    height: 40px; /* Adjust this to your preferred height */
    width: auto;  /* Keeps the aspect ratio proportional */
    
}
    
header #buttons {display:flex;}
    header button.menu-toggle, header button.search-trigger {padding: 20px;}

/* home */
#hero img {height: 400px;}
#hero .content {width: auto; margin-right: 40px; position: relative; top: -50px; margin-bottom: 0px; text-align: left; padding: 15px 30px; min-height: auto; }
#hero .content h1, #hero .content p {color: white;}
    
/* swiper */
.swiper-slide img {height: 50vh;}
    
/* sections */
section.no-padding {padding: 30px 0 0 0;}
.radius-desktop {border-radius: 0;}
.margin-30 {margin: 10px;}
    
#breaker .image.geistwinkel {height: 300px;}
#breaker .container {padding: 30px;}
    
#tiles {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 15px; grid-row-gap: 15px;}
#tiles .tile:nth-child(1) {grid-column-start: auto; grid-column-end: auto; grid-row-start: auto; grid-row-end: auto;}
#tiles .tile:nth-child(6) {grid-column-start: auto; grid-column-end: auto; grid-row-start: auto; grid-row-end: auto;}
    
section#hero-image img {height: 65vh;}
#hero-image .overlay {
    top: 0;
    transform: translate(0%, 0%);
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
#hero-image .overlay .row { width: 90%; max-width: 100%; min-width: 0; margin: 0 auto; }
#hero-image .content {
    max-width: 600px; padding: 15px;
    margin-bottom: 20px;
}


#hero-image .content h1, #hero-image .content p {color: white; line-height: 1.1;}   
    
    
.sortiment-button {padding: 10px 15px; font-size: var(--font-h5);}
.sortiment-button-list {gap: 10px;}
  
.item-thumb, .hero {
	max-width: 470px;
  margin-left: auto;
  margin-right: auto;
  display:block;}

#icons, #head span.cta, #head .container {display: none;}
    
h1 {margin: 20px auto;}

div.pagination div.centered {width: 100%;}
    
footer .widget {margin-bottom: 30px;}
footer ul.menu li {display: inline;}
footer ul.menu li a {background: rgba(0,0,0,.1); padding: 5px 10px; display: inline-block; margin-bottom: 5px;}
footer ul.menu li a:hover {background: rgba(255,255,255,1); color: var(--grey-main); text-decoration: none;}

.top p, ul#misc, .nav ul{display: none;}

.top p.slide{display: block;}

.room_intro_title {font-size: var(--normal); line-height: 1;}
.room_intro_box p {line-height: 1;}
.room_intro_thumb {height: 140px !important;}

.product_tile img {height: 20vh;}
.product_tile .title {padding: 10px 15px; font-size: var(--font-medium);}
    
    

}