/* Theme Name: ruether 2023 Author: iuno.co Version: 1.0 */ /* body main:after { position: relative; bottom: 0; right: 0; z-index: 500; color: lime; background-color: #000; padding: 0.2rem; font-family: serif; } body main:after { content: '<576 - none (xs) - mobile'; } @media (min-width: 576px) { body main:after { content: '>576 - sm - tablet'; } } @media (min-width: 768px) { body main:after { content: '>768 - md - tablet'; } } @media (min-width: 992px) { body main:after { content: '>992 - lg - tablet'; } } @media (min-width: 1200px) { body main:after { content: '>1200 - xl - desktop'; } } @media (min-width: 1400px) { body main:after { content: '>1400 - xxl - desktop'; } } body:after { position: relative; bottom: 0; left: 0; z-index: 500; color: aqua; background-color: #000; padding: 0.2rem; font-family: serif; } body.mobile:after { content: 'php check: mobile'; } body.tablet:after { content: 'php check: tablet'; } body.desktop:after { content: 'php check: desktop'; } */ * { font-family: 'Barlow'; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; } body { position: relative; overflow: auto; background-color: var(--grey-2); } body.modal-open { overflow: hidden; } main { overflow: hidden; } .container { width: 100% !important; max-width: 1216px !important; padding: 0 24px; } .alignright { float: right; } .alignleft { float: left; } .aligncenter { position: relative; display: block; text-align: center; width: 100%; } .alignfull { } .alignwide { } .ruether-logo svg { width: auto; height: 3rem; margin: 2rem 0 0 0; } .ruether-logo path { fill: var(--white); } /* schriften */ h1, .is-style-iuno-h1 { font-size: 3rem; line-height: 1.2; margin: 0 0 0 0; } h2, .is-style-iuno-h2 { font-size: 2.25rem; line-height: 1.2; margin: 0 0 0 0; } h3, .is-style-iuno-h3 { font-size: 1.875rem; line-height: 1.2; margin: 0 0 0 0; } h4, .is-style-iuno-h4 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0 0; } h5, .is-style-iuno-h5 { font-size: 1.25rem; line-height: 1.2; margin: 0 0 0 0; } h6, .is-style-iuno-h6 { font-size: 1.15rem; line-height: 1.2; margin: 0 0 0 0; } p { font-size: 1rem; line-height: 2; margin: 0 0 1rem 0; } ul, ol { list-style: outside disc none; margin: 0 0 1rem 0; } ul li, ol li { font-size: 1rem; line-height: 2; } b, strong { font-weight: 600 !important; } .is-style-iuno-normal { position: relative; margin: 0 auto; width: 100%; max-width: 1100px; } .is-style-iuno-narrow { position: relative; margin: 0 auto; width: 100%; max-width: 900px; } .is-style-iuno-wide { position: relative; margin: 0 auto; width: 100%; max-width: 100vw; } .is-style-iuno-normal::after, .is-style-iuno-narrow::after, .is-style-iuno-wide::after { content: ''; width: 0; height: 0; overflow: hidden; clear: both; } /* sticky header */ #sticky-border { position: fixed; top: -0.5rem; left: 0; width: 100vw; z-index: 3000; height: 1rem; background-color: var(--main); transition: top 1s ease-in-out; } .iuno-top #sticky-border { top: -1.1rem; } #sticky-header { position: relative; top: 0; left: 0; z-index: 2000; width: 100%; height: 7rem; } body.home #sticky-header { opacity: 0; transition: opacity .5s ease-in-out 2.5s; } body.home.play #sticky-header { opacity: 1; } #sticky-header.out { transition: opacity .5s ease-in-out 0.25s; opacity: 0; } #sticky-header nav.navbar { position: relative; left: 0; top: 0; width: 100%; height: 7rem; display: block; margin: 0 !important; padding: 2.3rem 0 0 0; } #sticky-header nav ul.nav { width: 100%; margin: 0 !important; } #sticky-header nav .nav-item { padding-left: 0.5rem; } #sticky-header nav .nav-link { line-height: 2.5rem; padding: 0 1rem; font-size: 1rem; font-weight: 600; white-space: nowrap; color: var(--white); } #sticky-header nav .nav-link:hover { color: var(--main) !important; background-color: var(--white); border-radius: 0.25rem; } #sticky-header nav .nav-link[aria-expanded="true"] { color: var(--main); background-color: var(--white); border-radius: 0.25rem 0.25rem 0 0; position: relative; z-index: 15; } #sticky-header nav .dropdown-menu { min-width: calc(100% - 0.5rem); width: auto; max-width: auto; background-color: var(--white); border-radius: 0 0.25rem 0.25rem 0.25rem; box-shadow: 2px 2px 5px 5px #00000010; z-index: 10; padding: 0; margin-top: -3px !important; margin-left: 0.5rem; overflow: hidden; } #sticky-header nav .dropdown-menu .dropdown-item { line-height: 1.5rem; padding: 0.5rem 1rem; color: var(--main) !important; font-weight: 600; } #sticky-header nav .dropdown-menu .dropdown-item:hover { color: var(--white) !important; background-color: var(--main); } #sticky-header nav .dropdown-toggle::after { content: url('data/chevron-down-white.svg'); width: 1rem; height: 1.5rem; padding-left: 0.8rem; transform: scale(0.8); display: inline-block; margin-left: 0; vertical-align: 0; border: none; } #sticky-header nav .dropdown-toggle:hover::after, #sticky-header nav .dropdown-toggle[aria-expanded="true"]::after { content: url('data/chevron-down-blue.svg'); } #side-navigation-toggle { line-height: 2.5rem; padding: 0 1.25rem; font-size: 1rem; font-weight: 600; white-space: nowrap; position: relative; top: 2.3rem; right: 0; z-index: +1; color: var(--main) !important; background-color: var(--white); border-radius: 0.25rem; } button#side-navigation-toggle::before { content: "Menü"; display: inline-block; padding-right: 1rem; } button#side-navigation-toggle .span { position: relative; top: 0.1rem; padding: 0; margin: 0; display: inline-block; width: 1rem; } button#side-navigation-toggle span { position: relative; display: block; float: right; width: 1rem; height: 0.25rem; transition: all .2s; border-width: 2px 0 0 0; border-style: solid; border-color: var(--main); } button#side-navigation-toggle:hover { color: var(--white) !important; background-color: var(--main-dark); } button#side-navigation-toggle:hover span { border-color: var(--white) !important; } .modal-open button#side-navigation-toggle span { opacity: 0; } .modal-open button#side-navigation-toggle span:first-of-type { opacity: 1; transform-origin: center center; transform: rotate(45deg); top: 0.245rem; } .modal-open button#side-navigation-toggle span:last-of-type { opacity: 1; transform-origin: center center; transform: rotate(-45deg); left: 1.25rem; left: 0.1rem; top: -0.245rem; } #screen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .5s linear, visibility .5s ease-in; background-color: var(--main); } #screen-overlay.show { width: 100%; opacity: 0.3; visibility: visible; } #side-navigation { position: fixed; display: block; width: 100%; min-width: 401px; height: 100%; top: 0; left: 0; z-index: 1200; visibility: hidden; opacity: 0; transform: translateX(+100%); transition: all .2s; overflow-y: auto; overflow-x: hidden; border-radius: 0; background-color: var(--main); color: var(--white); } #side-navigation.show { visibility: visible; opacity: 1; transform: translateX(0); transition: transform .2s; } @media (min-width: 576px) { #side-navigation.show { transform: translateX(calc(+100% - 576px)); } } #side-navigation .flex-menu { height: 100vh; } #side-navigation .aside-head { height: 7rem; } #side-navigation .aside-foot { height: 7rem; } #side-navigation ul { list-style: none outside none; } #side-navigation ul ul { margin-left: 2rem; padding-bottom: 1rem; } #side-navigation ul a { text-decoration: none; display: block; font-size: 1.5rem; line-height: 2; } #side-navigation ul ul a { font-size: 1.2rem } #side-navigation li.icon { position: relative; display: inline-block !important; margin: 0.5rem 0.75rem 0 -0.25rem; background-position: center center; background-repeat: no-repeat; } #side-navigation li.icon a { font-size: 0; line-height: 0; width: 2rem; height: 2rem; } #side-navigation li.icon.facebook { background-image: url('data/facebook-white.svg'); background-size: 1.5rem auto; } #side-navigation li.icon.instagram { background-image: url('data/instagram-white.svg'); background-size: 1.5rem auto; } #side-navigation li.icon.youtube { background-image: url('data/youtube-white.svg'); background-size: 1.5rem auto; } .intro-ruether { position: absolute; display: none; opacity: 0; z-index: 1000; top: 50vh; left: 0; width: 100vw; height: 4rem; margin: -2rem 0; text-align: center; } .home .intro-ruether { display: block; } .home.play .intro-ruether { animation: intro 2s ease-in-out 0.5s 1 normal forwards; } .intro-ruether svg { width: auto; height: 3rem; margin: 0; } .intro-ruether path { fill: var(--white); } @keyframes intro { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @media (max-width: 767px) { /* step 1 */ div.fh-o { background-color: var(--main); position: absolute; top: 0; left: 0; width: 100vw; height: calc(((100vh - 7rem) / 3) + 7rem); z-index: 20; } header.fh div.fh-o { height: 0; top: calc(((100vh - 7rem) / 3) + 7rem); transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } header.kd div.fh-o { height: 0; top: calc(((100vh - 7rem) / 3) + 7rem); transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } header.pv div.fh-o { height: 0; top: calc(((100vh - 7rem) / 3) + 7rem); transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } body.home header div.fh-o { height: calc(((100vh - 7rem) / 3) + 7rem); top: 0; transition: height .5s ease-in-out 2s, top .5s ease-in-out 2s; } body.home.play header div.fh-o { height: 0; } div.kd-o { background-color: var(--main); position: absolute; top: calc(((100vh - 7rem) / 3) + 7rem); left: 0; width: 100vw; height: calc((100vh - 7rem) / 3); z-index: 20; } header.fh div.kd-o { height: 0; top: calc(((100vh - 7rem) / 3 * 2) + 7rem); transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } header.kd div.kd-o { height: 0; top: calc(((100vh - 7rem) / 3 * 2) + 7rem); transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } header.pv div.kd-o { height: 0; top: calc(((100vh - 7rem) / 3 * 2) + 7rem); transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } body.home header div.kd-o { height: calc((100vh - 7rem) / 3); top: calc(((100vh - 7rem) / 3) + 7rem); transition: height .5s ease-in-out 2s, top .5s ease-in-out 2s; } body.home.play header div.kd-o { height: 0; } div.pv-o { background-color: var(--main); position: absolute; top: calc(((100vh - 7rem) / 3 * 2) + 7rem); left: 0; width: 100vw; height: calc((100vh - 7rem) / 3); z-index: 20; } header.fh div.pv-o { height: 0; top: 100vh; transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } header.kd div.pv-o { height: 0; top: 100vh; transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } header.pv div.pv-o { height: 0; top: 100vh; transition: height .5s ease-in-out .75s, top .5s ease-in-out .75s; } body.home header div.pv-o { height: calc((100vh - 7rem) / 3); top: calc(((100vh - 7rem) / 3 * 2) + 7rem); transition: height .5s ease-in-out 2s, top .5s ease-in-out 2s; } body.home.play header div.pv-o { height: 0; } /* step 2 */ div.fh { background-color: var(--blue); position: absolute; left: 0; top: 0; width: 100vw; height: calc(((100vh - 14rem) / 3) + 7rem); z-index: 10; } header.fh div.fh { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; height: 100vh; top: 0; z-index: 15; } header.kd div.fh { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; } header.pv div.fh { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; } body.home.play header.fh div.fh { transition: height .5s ease-out .25s, top .5s ease-out .25s; height: 100vh; top: 0; z-index: 15; } body.home.play header.kd div.fh { transition: height .5s ease-out .25s, top .5s ease-out .25s; } body.home.play header.pv div.fh { transition: height .5s ease-out .25s, top .5s ease-out .25s; } div.kd { background-color: var(--blue); position: absolute; left: 0; top: calc(((100vh - 14rem) / 3) + 7rem); width: 100vw; height: calc((100vh - 14rem) / 3); z-index: 10; } header.fh div.kd { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; } header.kd div.kd { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; height: 100vh; top: 0; z-index: 15; } header.pv div.kd { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; } body.home.play header.fh div.kd { transition: height .5s ease-out .25s, top .5s ease-out .25s; } body.home.play header.kd div.kd { transition: height .5s ease-out .25s, top .5s ease-out .25s; height: 100vh; top: 0; z-index: 15; } body.home.play header.pv div.kd { transition: height .5s ease-out .25s, top .5s ease-out .25s; } div.pv { background-color: var(--blue); position: absolute; left: 0; bottom: 0; width: 100vw; height: calc(((100vh - 14rem) / 3) + 7rem); z-index: 10; } header.fh div.pv { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; } header.kd div.pv { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; } header.pv div.pv { transition: height .5s ease-out 1.75s, top .5s ease-out 1.75s; height: 100vh; bottom: 0; z-index: 15; } body.home.play header.fh div.pv { transition: height .5s ease-out .25s, top .5s ease-out .25s; } body.home.play header.kd div.pv { transition: height .5s ease-out .25s, top .5s ease-out .25s; } body.home.play header.pv div.pv { transition: height .5s ease-out .25s, top .5s ease-out .25s; height: 100vh; bottom: 0; z-index: 15; } div.fh { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } div.kd { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } div.pv { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } @supports(font:-apple-system-body) and (-webkit-touch-callout:default) { div.fh { background-size: 130% auto; background-attachment: scroll; background-position: 0 0; background-repeat: no-repeat; } /* .btn-fh-intro { position: relative; top: -1.5rem; } */ div.kd { background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; } div.pv { background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; } } @supports(font:-apple-system-body) and (not(-webkit-touch-callout:default)){ } /* step 3 */ header { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; } header.fh { transition: height .35s ease-out 2.25s, top .35s ease-out 2.25s; height: 0; top: 100vh; } header.kd { transition: width .35s ease-out 2.25s; width: 0; } header.pv { transition: height .35s ease-out 2.25s, top .35s ease-out 2.25s; height: 0; } body.home.play header.fh { transition: height .35s ease-out .75s, top .35s ease-out .75s; height: 0; top: 100vh; } body.home.play header.kd { transition: width .35s ease-out .75s; width: 0; } body.home.play header.pv { transition: height .35s ease-out .75s, top .35s ease-out .75s; height: 0; } /* stage / home */ .stage { position: relative; width: 100%; height: calc(100vh - 7rem); margin-top: 0; transition: opacity .5s ease-in-out; } .stage.out { opacity: 0; } .stage .fh-intro { position: absolute; left: 0; top: 0; height: calc((100vh - 14rem) / 3); width: 100%; z-index: 10; cursor: pointer; } .stage .kd-intro { position: absolute; left: 0; top: calc((100vh - 14rem) / 3); height: calc((100vh - 14rem) / 3); width: 100%; z-index: 10; cursor: pointer; } .stage .pv-intro { position: absolute; left: 0; top: calc(((100vh - 14rem) / 3) * 2); height: calc((100vh - 14rem) / 3); width: 100%; z-index: 10; cursor: pointer; } .stage .intro-info { position: relative; opacity: 0; top: 5vh; color: var(--white); padding: 1rem; width: 100%; text-align: center; } .stage .intro-info p { width: calc(100% - 4rem); max-width: 400px; padding-bottom: 0; display: inline-block; } .stage .fh-intro .intro-info { transition: opacity .5s ease-in-out 2.75s, top .5s ease-in-out 2.75s; } .stage .kd-intro .intro-info { transition: opacity .5s ease-in-out 3s, top .5s ease-in-out 3s; } .stage .pv-intro .intro-info { transition: opacity .5s ease-in-out 3.25s, top .5s ease-in-out 3.25s; } body.play .stage .fh-intro .intro-info, body.play .stage .kd-intro .intro-info, body.play .stage .pv-intro .intro-info { opacity: 1; top: 0; } } @media (min-width: 768px) { /* step 1 */ div.fh-o { background-color: var(--main); position: absolute; top: 0; left: 0; width: 33.333vw; height: 100vh; z-index: 20; } header.fh div.fh-o { width: 0; left: 33.333vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } header.kd div.fh-o { width: 0; left: 33.333vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } header.pv div.fh-o { width: 0; left: 33.333vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } body.home header div.fh-o { width: 33.333vw; left: 0; transition: width .5s ease-in-out 2s, left .5s ease-in-out 2s; } body.home.play header div.fh-o { width: 0; left: 33.333vw; } div.kd-o { background-color: var(--main); position: absolute; top: 0; left: 33.333vw; width: 33.333vw; height: 100vh; z-index: 20; } header.fh div.kd-o { width: 0; left: 66.666vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } header.kd div.kd-o { width: 0; left: 66.666vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } header.pv div.kd-o { width: 0; left: 66.666vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } body.home header div.kd-o { width: 33.333vw; left: 33.333vw; transition: width .5s ease-in-out 2s, left .5s ease-in-out 2s; } body.home.play header div.kd-o { width: 0; left: 66.666vw; } div.pv-o { background-color: var(--main); position: absolute; top: 0; left: 66.666vw; width: 33.333vw; height: 100vh; z-index: 20; } header.fh div.pv-o { width: 0; left: 100vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } header.kd div.pv-o { width: 0; left: 100vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } header.pv div.pv-o { width: 0; left: 100vw; transition: width .5s ease-in-out .75s, left .5s ease-in-out .75s; } body.home header div.pv-o { width: 33.333vw; left: 66.666vw; transition: width .5s ease-in-out 2s, left .5s ease-in-out 2s; } body.home.play header div.pv-o { width: 0; left: 100vw; } /* step 2 */ div.fh { background-color: var(--blue); position: absolute; top: 0; left: 0; width: 33.333vw; height: 100vh; z-index: 10; } header.fh div.fh { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; width: 100vw; left: 0; z-index: 15; } header.kd div.fh { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; } header.pv div.fh { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; } body.home.play header.fh div.fh { transition: width .5s ease-out .25s, left .5s ease-out .25s; width: 100vw; left: 0; z-index: 15; } body.home.play header.kd div.fh { transition: width .5s ease-out .25s, left .5s ease-out .25s; } body.home.play header.pv div.fh { transition: width .5s ease-out .25s, left .5s ease-out .25s; } div.kd { background-color: var(--blue); position: absolute; top: 0; left: 33.333vw; width: 33.333vw; height: 100vh; z-index: 10; } header.fh div.kd { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; } header.kd div.kd { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; width: 100vw; left: 0; z-index: 15; } header.pv div.kd { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; } body.home.play header.fh div.kd { transition: width .5s ease-out .25s, left .5s ease-out .25s; } body.home.play header.kd div.kd { transition: width .5s ease-out .25s, left .5s ease-out .25s; width: 100vw; left: 0; z-index: 15; } body.home.play header.pv div.kd { transition: width .5s ease-out .25s, left .5s ease-out .25s; } div.pv { background-color: var(--blue); position: absolute; top: 0; right: 0; width: 33.333vw; height: 100vh; z-index: 10; } header.fh div.pv { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; } header.kd div.pv { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; } header.pv div.pv { transition: width .5s ease-out 1.75s, left .5s ease-out 1.75s; width: 100vw; right: 0; z-index: 15; } body.home.play header.fh div.pv { transition: width .5s ease-out .25s, left .5s ease-out .25s; } body.home.play header.kd div.pv { transition: width .5s ease-out .25s, left .5s ease-out .25s; } body.home.play header.pv div.pv { transition: width .5s ease-out .25s, left .5s ease-out .25s; width: 100vw; right: 0; z-index: 15; } div.fh { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center 40%; } div.kd { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } div.pv { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } @supports(font:-apple-system-body) and (-webkit-touch-callout:default) { div.fh { background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; } div.kd { background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; } div.pv { background-size: cover; background-attachment: scroll; background-position: center center; background-repeat: no-repeat; } } @supports(font:-apple-system-body) and (not(-webkit-touch-callout:default)){ } /* step 3 */ header { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; min-height: 500px; overflow: hidden; } header.fh { transition: width .35s ease-out 2.25s, left .35s ease-out 2.25s; width: 0; left: 100vw; } header.kd { transition: height .35s ease-out 2.25s; height: 0; } header.pv { transition: width .35s ease-out 2.25s, left .35s ease-out 2.25s; width: 0; } body.home.play header.fh { transition: width .35s ease-out .75s, left .35s ease-out .75s; width: 0; left: 100vw; } body.home.play header.kd { transition: height .35s ease-out .75s; height: 0; } body.home.play header.pv { transition: width .35s ease-out .75s, left .35s ease-out .75s; width: 0; } /* stage / home */ .stage { position: relative; width: 100%; height: 100vh; min-height: 500px; margin-top: -7rem; transition: opacity .5s ease-in-out; } .stage.out { opacity: 0; } .stage .fh-intro { position: absolute; top: 0; left: 0; width: 33.333vw; height: 100%; z-index: 10; cursor: pointer; } .stage .kd-intro { position: absolute; top: 0; left: 33.333vw; width: 33.333vw; height: 100%; z-index: 10; cursor: pointer; } .stage .pv-intro { position: absolute; top: 0; left: 66.666vw; width: 33.333vw; height: 100%; z-index: 10; cursor: pointer; } .stage .intro-info { position: relative; opacity: 0; top: 5vh; color: var(--white); padding: 1rem; width: 100%; text-align: center; } .stage .intro-info p { width: 20vw; max-width: 350px; padding-bottom: 2rem; display: inline-block; } .stage .fh-intro .intro-info { transition: opacity .5s ease-in-out 2.75s, top .5s ease-in-out 2.75s; } .stage .kd-intro .intro-info { transition: opacity .5s ease-in-out 3s, top .5s ease-in-out 3s; } .stage .pv-intro .intro-info { transition: opacity .5s ease-in-out 3.25s, top .5s ease-in-out 3.25s; } body.play .stage .fh-intro .intro-info, body.play .stage .kd-intro .intro-info, body.play .stage .pv-intro .intro-info { opacity: 1; top: 0; } } /* main */ main { position: relative; z-index: 30; opacity: 1; top: 0; margin: 0; min-height: 100vh; transition: opacity .15s ease-in-out 0s, top .15s ease-in-out 0s; } main.start { opacity: 1; top: 0; /*opacity: 0; top: 5vh; */ } main.out { opacity: 0; } /* bilder */ figcaption { height: 2.5rem; padding: 0.5rem 0 !important; overflow: hidden; text-align: left !important; font-size: 0.85rem !important; white-space: nowrap; text-overflow: ellipsis; } figcaption span { display: inline-block; padding-left: 0.5rem; opacity: 0.5; } figcaption span::before { content: '© '; } .wp-block-kadence-advancedgallery .kt-blocks-carousel { overflow: visible !important; } .wp-block-kadence-listitem.kt-svg-icon-list-item-wrap.normal { position: relative; } .wp-block-kadence-listitem.kt-svg-icon-list-item-wrap.normal::before { content: ''; position: absolute; left: -0.5rem; top: 0; z-index: -1; width: calc(100% + 1rem); height: 100%; border-radius: 2rem; border: 2px var(--white) solid; } .wp-block-kadence-listitem.kt-svg-icon-list-item-wrap.highlight { position: relative; } .wp-block-kadence-listitem.kt-svg-icon-list-item-wrap.highlight::before { content: ''; position: absolute; left: -0.5rem; top: 0; z-index: -1; width: calc(100% + 1rem); height: 100%; background-color: var(--contrast-1); border-radius: 2rem; border: 2px var(--white) solid; } .splide button.splide__arrow { width: 2.5rem; height: 2.5rem; background-color: var(--contrast-1); opacity: 1 !important; top: calc((100% - 2rem) / 2) !important; } .splide button.splide__arrow:hover { background-color: var(--contrast-1-dark); } .splide button.splide__arrow svg { display: none; } .splide button.splide__arrow.splide__arrow--prev.slick-prev { left: -1.25rem; background-image: url('data/chevron-left-white.svg'); background-size: 0.6rem auto; background-repeat: no-repeat; background-position: center center; } .splide button.splide__arrow.splide__arrow--next.slick-next { right: -1.25rem; background-image: url('data/chevron-right-white.svg'); background-size: 0.6rem auto; background-repeat: no-repeat; background-position: center center; } .is-style-iuno-square img { border-radius: 0.5rem; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; } .is-style-iuno-16-9 img { border-radius: 0.5rem; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; } .is-style-iuno-16-10 img { border-radius: 0.5rem; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; } .is-style-iuno-4-3 img { border-radius: 0.5rem; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; } .is-style-iuno-event img { border-radius: 0.5rem; aspect-ratio: 3 / 1; object-fit: cover; object-position: center; } .figure img { border-radius: 0.5rem; } .is-style-iuno-square figcaption { display: none; } .is-style-iuno-16-9 figcaption { } .is-style-iuno-16-10 figcaption { } .is-style-iuno-4-3 figcaption { display: none; } .is-style-iuno-event figcaption { display: none; } /* footer */ #footer { } #footer p { line-height: 2; margin-bottom: 0.5rem !important; } #footer nav ul { display: block; width: 100%; } #footer nav li { display: inline-block; padding-right: 1rem; line-height: 2rem; } #footer nav li a { text-decoration: underline; } #footer nav li.break::before { content: ''; display: block; width: 100%; height: 1px; overflow: hidden; } #footer nav li.icon { position: relative; display: inline-block !important; margin: 0.5rem 0.75rem 0 -0.25rem; background-position: center center; background-repeat: no-repeat; } #footer nav li.icon a { font-size: 0; line-height: 0; width: 2rem; height: 2rem; } #footer nav li.icon.facebook { background-image: url('data/facebook-black.svg'); background-size: 1.5rem auto; } #footer nav li.icon.instagram { background-image: url('data/instagram-black.svg'); background-size: 1.5rem auto; } #footer nav li.icon.youtube { background-image: url('data/youtube-black.svg'); background-size: 1.5rem auto; } @media (min-width: 768px) { #footer nav li { display: block; padding-right: 0; } } /* buttons */ #scroll-down { position: fixed; bottom: -5rem; left: calc(50vw - 1rem); opacity: 0; z-index: 29; animation: down-ani linear 2s; animation-iteration-count: infinite; transform-origin: 50% 50%; font-size: 0; -webkit-animation: down-ani linear 2s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: down-ani linear 2s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: down-ani linear 2s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: down-ani linear 2s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; } .iuno-top .play #scroll-down { bottom: 1rem; opacity: 1; transition: opacity .5s ease-in-out 2.75s, bottom .5s ease-in-out 2.75s; } .play #scroll-down { bottom: -5rem; opacity: 0; transition: opacity .5s ease-in-out 2.75s, bottom .5s ease-in-out 0.75s; } button { line-height: 1.5rem; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 600; color: var(--main); background-color: var(--white); border-radius: 0.25rem; border: 0; } a.button.arrow-right::after { display: block; width: 2rem; height: 1.5rem; float: right; padding-left: 1rem; transform: scale(0.8); } a.button.arrow-right[class*='style-white']::after { content: url('data/arrow-right-blue.svg'); } a.button.arrow-right[class*='style-main']::after { content: url('data/arrow-right-white.svg'); } a.button.arrow-right[class*='style-contrast-1']::after { content: url('data/arrow-right-white.svg'); } a.button.scroll-down { display: block; width: 2rem; height: 2rem; padding: 0; background-image: url('data/scroll-down-contrast-1.svg'); background-size: 90%; background-repeat: no-repeat; background-position: center center; } a.button.chat::after { display: block; width: 2.5rem; height: 1.5rem; float: right; padding-left: 1rem; transform: scale(0.8); } a.button.chat[class*='style-white']::after { content: url('data/chat-blue.svg'); } a.button.chat[class*='style-main']::after { content: url('data/chat-white.svg'); } a.button.chat[class*='style-contrast-1']::after { content: url('data/chat-white.svg'); } a.button.mail::before { display: block; width: 2.5rem; height: 1.5rem; float: left; padding-right: 1rem; transform: scale(0.8); } a.button.mail[class*='style-white']::before { content: url('data/mail-blue.svg'); } a.button.mail[class*='style-main']::before { content: url('data/mail-white.svg'); } a.button.mail[class*='style-contrast-1']::before { content: url('data/mail-white.svg'); } a.button.phone::before { display: block; width: 2.25rem; height: 1.5rem; float: left; padding-right: 1rem; transform: scale(0.8); } a.button.phone[class*='style-white']::before { content: url('data/phone-blue.svg'); } a.button.phone[class*='style-main']::before { content: url('data/phone-white.svg'); } a.button.phone[class*='style-contrast-1']::before { content: url('data/phone-white.svg'); } a.button.whatsapp::before { display: block; width: 2rem; height: 1.5rem; float: left; padding-right: 1rem; transform: scale(0.8); } a.button.whatsapp[class*='style-white']::before { content: url('data/whatsapp-blue.svg'); } a.button.whatsapp[class*='style-main']::before { content: url('data/whatsapp-white.svg'); } a.button.whatsapp[class*='style-contrast-1']::before { content: url('data/whatsapp-white.svg'); } a.button.whatsapp-r::after { display: block; width: 2rem; height: 1.5rem; float: right; padding-left: 1rem; transform: scale(0.8); } a.button.whatsapp-r[class*='style-white']::after { content: url('data/whatsapp-blue.svg'); } a.button.whatsapp-r[class*='style-main']::after { content: url('data/whatsapp-white.svg'); } a.button.whatsapp-r[class*='style-contrast-1']::after { content: url('data/whatsapp-white.svg'); } a.button.instagram::before { display: block; width: 2rem; height: 1.5rem; float: left; padding-right: 1rem; transform: scale(0.8); } a.button.instagram[class*='style-white']::before { content: url('data/instagram-blue.svg'); } a.button.instagram[class*='style-main']::before { content: url('data/instagram-white.svg'); } a.button.instagram[class*='style-contrast-1']::before { content: url('data/instagram-white.svg'); } a.button.instagram-r::after { display: block; width: 2rem; height: 1.5rem; float: right; padding-left: 1rem; transform: scale(0.8); } a.button.instagram-r[class*='style-white']::after { content: url('data/instagram-blue.svg'); } a.button.instagram-r[class*='style-main']::after { content: url('data/instagram-white.svg'); } a.button.instagram-r[class*='style-contrast-1']::after { content: url('data/instagram-white.svg'); } a.button.youtube::before { display: block; width: 2rem; height: 1.5rem; float: left; padding-right: 1rem; transform: scale(0.8); } a.button.youtube[class*='style-white']::before { content: url('data/youtube-blue.svg'); } a.button.youtube[class*='style-main']::before { content: url('data/youtube-white.svg'); } a.button.youtube[class*='style-contrast-1']::before { content: url('data/youtube-white.svg'); } a.button.youtube-r::after { display: block; width: 2rem; height: 1.5rem; float: right; padding-left: 1rem; transform: scale(0.8); } a.button.youtube-r[class*='style-white']::after { content: url('data/youtube-blue.svg'); } a.button.youtube-r[class*='style-main']::after { content: url('data/youtube-white.svg'); } a.button.youtube-r[class*='style-contrast-1']::after { content: url('data/youtube-white.svg'); } a.button:not[.round][target='_blank']::after { display: block; width: 2rem; height: 1.5rem; float: right; padding-left: 1rem; transform: scale(0.8); } a.button:not[.round][target='_blank'][class*='style-white']::after { content: url('data/extern-blue.svg'); } a.button:not[.round][target='_blank'][class*='style-main']::after { content: url('data/extern-white.svg'); } a.button:not[.round][target='_blank'][class*='style-contrast-1']::after { content: url('data/extern-white.svg'); } a.button.is-style-white-md, a.button.is-style-main-md, a.button.is-style-contrast-1-md { display: inline-block; padding: 0.5rem 1rem; border-radius: 0.25rem; border: 0; font-size: 1rem; line-height: 1.5rem !important; font-weight: 400; text-decoration: none; } a.button.is-style-white-lg, a.button.is-style-main-lg, a.button.is-style-contrast-1-lg { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.25rem; border: 0; font-size: 1.25rem; line-height: 1.5rem !important; font-weight: 400; text-decoration: none; } a.button.is-style-white-md, a.button.is-style-white-lg { color: var(--main); background-color: var(--white); } a.button.is-style-white-md:hover, a.button.is-style-white-lg:hover { background-color: var(--grey-1); color: var(--main); } a.button.is-style-main-md, button.is-style-main-md, a.button.is-style-main-lg, button.is-style-main-lg { color: var(--white) !important; background-color: var(--main); } a.button.is-style-main-md:hover, button.is-style-main-md:hover, a.button.is-style-main-lg:hover, button.is-style-main-lg:hover { background-color: var(--main-dark); color: var(--white) !important; } a.button.is-style-contrast-1-md, a.button.is-style-contrast-1-lg { color: var(--white) !important; background-color: var(--contrast-1); } a.button.is-style-contrast-1-md:hover, a.button.is-style-contrast-1-lg:hover { background-color: var(--contrast-1-dark); color: var(--white) !important; } a.button.round { border-radius: 100% !important; margin-right: 0.5rem; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } a.button.whatsapp.round::before { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/whatsapp-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.whatsapp-r.round::after { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/whatsapp-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.chat.round::after { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/mail-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.mail.round::before { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/mail-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.instagram.round::before { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/instagram-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.instagram-r.round::after { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/instagram-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.youtube.round::before { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/youtube-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.youtube-r.round::after { content: '' !important; width: 2.5rem !important; height: 2.5rem !important; background-image: url('data/youtube-white.svg'); background-position: center center; background-size: 1.5rem auto; background-repeat: no-repeat; } a.button.dock-to-image { position: relative; top: -2.25rem; } /* blöcke */ .iuno-linebreak { clear: both; width: 0; height: 0; overflow: hidden; display: block; } .logo-ruether svg { width: auto; height: 3rem; margin: 0; display: inline-block; } .logo-ruether path { fill: var(--main); } .logo-ruether.is-style-white path { fill: var(--white); } /* kadence */ .kt-accordion-panel { position: relative; top: -0.5rem !important; } .kt-acccordion-button-label-show::before { content: url('data/chevron-down-black.svg'); display: inline-block; width: auto; height: 1.5rem; padding-right: 1rem; transform: scale(1); } .kt-acccordion-button-label-show.kt-accordion-panel-active::before { content: url('data/chevron-up-black.svg'); } .f1-1-st0, .f1-2-st0, .f1-3-st0, .f1-4-st0, .f2-1-st0, .f2-2-st0, .f2-3-st0 { fill: none; stroke: var(--main); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .f1-4-st1 { fill: none; stroke: var(--main); stroke-width: 10; stroke-miterlimit: 10; } .f2-1-st1 { fill: none; stroke: var(--main); stroke-width: 10; stroke-linejoin: round; stroke-miterlimit: 10; } .f2-3-st2 { fill: var(--main); } .pvform #date { width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; } .pvform span { font-size: 0.85rem; padding-right: 1rem; } .pvform .fehler span { color: var(--contrast-1); } .pvform { color: var(--black); } .pvform label svg { height: 130px; width: auto; max-width: 100%; } .pvform label { background-color: var(--white); text-align: center; color: var(--main); font-weight: 600; width: 100%; border-radius: 0.5rem; cursor: pointer; } .pvform label input { display: none; } .pvform label input.important { position: absolute; display: block; top: 1.65rem; left: 1.65rem; outline: none; opacity: 1; } .pvform label:has(> input.important) input.important { opacity: 0; } .pvform .f1 label, .pvform .f2 label { padding-bottom: 1rem; } .pvform .f3 label, .pvform .f4 label, .pvform .f5 label, .pvform .f6 label, .pvform .f12 label, .pvform .f13 label { padding-top: 1rem; padding-bottom: 1rem; } .pvform .f7 input, .pvform .f8 input, .pvform .f9 input, .pvform .f10 input, .pvform .f11 input { width: 100%; padding: 0.25rem 1rem; border-radius: 0.5rem; color: var(--black); line-height: 2; border-width: 0; } .pvform .f2, .pvform .f3, .pvform .f4, .pvform .f5, .pvform .f6, .pvform .f7, .pvform .f8, .pvform .f9, .pvform .f10, .pvform .f11, .pvform .f12, .pvform .f13 { position: relative; display: none; } .pvform .s2 .f2, .pvform .s3 .f3, .pvform .s4 .f4, .pvform .s5 .f5, .pvform .s6 .f6, .pvform .s7 .f7, .pvform .s8 .f8, .pvform .s9 .f9, .pvform .s10 .f10, .pvform .s11 .f11, .pvform .s12 .f12, .pvform .s13 .f13 { display: flex; } .pvform label.checked { background-color: var(--main); color: var(--white); } .pvform label.checked .f1-1-st0, .pvform label.checked .f1-2-st0, .pvform label.checked .f1-3-st0, .pvform label.checked .f1-4-st0, .pvform label.checked .f1-4-st1, .pvform label.checked .f2-1-st0, .pvform label.checked .f2-1-st1, .pvform label.checked .f2-2-st0, .pvform label.checked .f2-3-st0 { stroke: var(--white); } .pvform label.checked .f2-3-st2 { fill: var(--white); } .pvform label:has(> input:checked) { background-color: var(--main); color: var(--white); } .pvform label:has(> input:checked) .f1-1-st0, .pvform label:has(> input:checked) .f1-2-st0, .pvform label:has(> input:checked) .f1-3-st0, .pvform label:has(> input:checked) .f1-4-st0, .pvform label:has(> input:checked) .f1-4-st1, .pvform label:has(> input:checked) .f2-1-st0, .pvform label:has(> input:checked) .f2-1-st1, .pvform label:has(> input:checked) .f2-2-st0, .pvform label:has(> input:checked) .f2-3-st0 { stroke: var(--white); } .pvform label:has(> input:checked) .f2-3-st2 { fill: var(--white); } .pvform .f13 label:has(> input.important)::before { content: ''; border-radius: 100%; width: 1.5rem; height: 1.5rem; display: block; float: left; margin: 0 1rem; border: var(--main) 2px solid; } .pvform .f13 label:has(> input:checked)::before { border: var(--white) 2px solid; background-image: url('data/check-white.svg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .pvform label.datenschutz { text-align: left; padding-right: 1rem; } .pvform label.datenschutz div { padding-left: 3.5rem; } #anfrage-ok, #anfrage-fehler, #anfrage-ungueltig { display: none; } main.ok #anfrage-ok { display: block; } main.fehler #anfrage-fehler { display: block; } main.ungueltig #anfrage-ungueltig { display: block; } @keyframes down-ani{ 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @-moz-keyframes down-ani{ 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.5); } 100% { -moz-transform: scale(1); } } @-webkit-keyframes down-ani { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.5); } 100% { -webkit-transform: scale(1); } } @-o-keyframes down-ani { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.5); } 100% { -o-transform: scale(1); } } @-ms-keyframes down-ani { 0% { -ms-transform: scale(1); } 50% { -ms-transform: scale(1.5); } 100% { -ms-transform: scale(1); } }