@font-face { font-family: "Theinhardt-Medium"; src: url("https://dominicrechsteiner.ch/wp-content/themes/dominic/fonts/TheinhardtMed.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } html, body { width: 100%; height: 100%; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } *, *::before, *::after { box-sizing: inherit; } html { overflow: hidden; -webkit-overflow-scrolling: touch; } body { margin: 0; overflow: hidden; background: white; font-family: "Theinhardt-Medium", sans-serif; } .page{ margin:0!important; } .lazy{ opacity: 0; transition: opacity 500ms ease-in-out; } .lazyloaded { opacity: 1; } .namequer img{ width:100%; height:100%; object-fit:contain; } .namequer{ position:absolute; top:50%; transform: translateY(-50%); left:0; padding:10px; z-index:999; display:block; } .namehoch img{ width:100%; height:100%; object-fit:contain; } .namehoch{ position:absolute; top:50%; transform: translateY(-50%); left:0; padding:10px; z-index:999; display:none; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; transform: translate3d(0, 0, 0); } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d .swiper-slide { transform-style: preserve-3d; } .swiper.swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left { z-index: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .swiperfadezwei{ height:100%; width:100%; } .swiperfade{ height:100%; width:100%; } .swiperfadezwei .swiper-wrapper{ height:100%; width:100%; } .swiperfade .swiper-wrapper{ height:100%; width:100%; } .swiperinner{ height:100%; width:100%; background:white; } .swiperinnerzwei{ height:100%; width:100%; background:white; } .swiperinnerdrei{ height:100%; width:100%; } .mySwiper{ height:100%; width:100%; } .swiper-wrapper{ width: 100%; height: 100%; position: relative; } .swiper-slide{ height:100%; width:100%; background:white; visibility:visible; } .swiper-button-next, .swiper-button-prev { position: absolute; top:0; width:50%; height:100%; margin-top:0; z-index: 99999; cursor: pointer; display: flex; align-items: center; justify-content: center; color:transparent; } swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { cursor: pointer; pointer-events: auto; } .hoch{ display:none; } .quer{ display:block; } .swiperfade .swiper-slide img, .swiperfadezwei .swiper-slide img { height: 100%; width: 100%; object-fit: cover; display: block; } .swiperfade, .swiperfadezwei { overflow: hidden; height: 100%; width: 100%; } .swiperfade .swiper-wrapper, .swiperfadezwei .swiper-wrapper { display: flex; height: 100%; width: 100%; } .swiperfade .swiper-slide, .swiperfadezwei .swiper-slide { flex: 0 0 100%; min-width: 0; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { overflow: hidden; } .swiperfade img, .swiperfadezwei img { opacity: 1 !important; visibility: visible !important; display: block !important; } .swiperfade, .swiperfadezwei { position: relative; } .logo { position: absolute; z-index: 50; pointer-events: none; } .namequer { top: 50%; left: 0; transform: translateY(-50%); padding: 10px; } .namehoch { top: 50%; left: 0; transform: translateY(-50%); padding: 10px; } .swiperfade, .swiperfadezwei { position: relative; } .swiperfade > .logo, .swiperfadezwei > .logo { position: absolute; z-index: 99999; visibility: visible !important; opacity: 1 !important; pointer-events: none; transform: translateY(-50%) translateZ(1px); backface-visibility: hidden; } .about { padding:5px; font-size: clamp(22px, 3vw, 55px); line-height: 0.95; letter-spacing: -0.03em; } .about p{ margin:0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; } .about a{ text-align:left; text-decoration:none; color:black; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; } .about a:hover{ color: transparent; text-shadow: 0 0 8px #000; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease; } .error{ position:fixed; z-index:99; top:0; left:0; height:100%; width:100%; background-color:blue; } @media (min-width: 1100px) and (orientation : landscape) { .hoch{display:none;} .quer{display:block;} } @media (max-width: 1100px) and (orientation : portrait) { .hoch{display:block;} .quer{display:none;} } @media only screen and (max-width: 600px) { .namehoch{ display:block; } .namequer{ display:none; } }