html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,video{height:auto;max-width:100%}audio{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}
@font-face { font-family: "Inter-Black"; font-style: normal; font-display: swap; src: url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/fonts/Inter-Black.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; src: url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/fonts/Inter-Regular.woff2) format("woff2"); } :root {
--dark-navigation: #0D2A34;
--dark: #0F303B;
--yellow50: #F6D47F;
--purple80: #BD72D1;
--lightgrey: #F8F8F8;
--dark: #0F303B;
--page-padding: 1rem;
}
body,
html {
height:100%
}
html {
font-size: 20px;
overflow-y:scroll;
scroll-behavior:smooth;
-webkit-text-size-adjust: 100%;
}
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5;
font-family: "Inter", Helvetica, Arial;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color:rgba(0,0,0,0.1);
padding: 0;
margin: 0;
color: var(--dark);
background: var(--lightgrey);
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 5;
-webkit-hyphenate-limit-after: 5;
-webkit-hyphenate-limit-chars: 10 5 5;
font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
font-variant-numeric: tabular-nums;
padding-top:constant(safe-area-inset-top);
padding-right:constant(safe-area-inset-right);
padding-bottom:constant(safe-area-inset-bottom);
padding-left:constant(safe-area-inset-left)
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
margin-bottom:1em;
}
h2,h3,h4 {
font-family: "Inter-Black";
}
.large, .lead, p:has(.large), p:has(.lead), h1 {
font-size: 2.1rem;
margin-bottom: 1em;
line-height:1.2;
}
p span.large, p span.lead {
margin: 0;
}
.medium, h2 {
font-size: 1.3rem;
margin-bottom: 1em;
line-height:1.2;
}
.teaser-title h1 {
font-size: 2.0rem;
line-height:1;
text-transform: uppercase;
font-family: "Inter-Black"
}
.teaser-title h2 {
line-height:1;
font-family: "Inter-Black"
}
.search-headline {
position: relative;
padding-right: 4rem;
}
.category-headline {
padding-top: .3rem;
}
.category-headline h1,
.search-headline h1 {
margin-bottom: 0;
font-size: 2rem;
line-height: 1;
text-transform: uppercase;
font-family: "Inter-Black";
}
.category-headline h1 + p,
.search-headline h1 + p {
margin-top: 1rem;
}
.search-headline a {
color: #fff !important
}
.search-headline .close {
display: block !important;
position: absolute;
right: -.2rem;
top: -.2rem;
}
.search-headline .close span {
display: none;
}
.black, strong, b {
font-family: "Inter-Black";
font-weight: normal;
}
.small {font-size: 0.8rem;letter-spacing: 0.015em;}
p {
margin-bottom: 1em;
}
a, a:visited {
text-decoration: none;
transition: border 200ms ease, color 200ms ease;
color: #0f303b;
}
.content a:not(.button), footer a{
text-decoration: underline;
text-decoration-thickness: 0.06em;
text-underline-offset: 0.1em;
transition: color 300ms ease;
}
.content a:hover, footer a:hover {
color:var(--purple80);
}
.content a:active, .content a:focus, footer a:active {
color: #F6D47F;
transition: all 0s;
}
.content a[href^="tel:"] {
white-space:nowrap;
} .app-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.app-wrapper > main {
flex: 1;
}
.content {
margin: 4rem auto 5rem;
max-width: 78rem;
padding: 0 6.5rem;
}
section {
margin-bottom: 4rem;
display: block;
}
.portal-posts {
margin-bottom: 8rem;
}
footer {
width:100%;
background: var(--dark-navigation);
padding: 4rem 0 1.5rem 0;
}
.page-template-homepage footer,
.page-template-about footer {
margin: 0;
}
.footer-content {
color:white;
display: flex;
flex-direction: column;
margin: 0 auto;
width:100%;
max-width: 78rem;
padding: 0 6.5rem;
align-items: flex-end;
}
.footer-wrapper {display:flex;align-self:flex-start;width:100%;justify-content: space-between;gap:4rem}
.footer-nav {align-self: flex-end}
.footer-nav ul {display: flex; gap: 1rem}
.footer-content a {color:white; text-decoration: none;}  nav {
margin-top:1.3rem;
}
.logo-wrapper {
display: flex;
gap: 1.5rem;
align-items: center;
}
.logo-wrapper a span {
display: none;
}
.page-template-homepage .ueber-logo {
opacity: 0;
transition: opacity 300ms ease !important;
}
.page-template-homepage .header-wrapper:has(.mobile-nav-show) .ueber-logo,
.page-template-homepage .header--sticky:not(.header--hidden) .ueber-logo {
opacity: 1;
}
.logo-u18 {
background: url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/logo-u18.svg) no-repeat;
background-size: 7.1rem auto;
background-position: left center;
width: 7.1rem;
height: 2.0rem;
margin-bottom:1rem;
}
.logo-biz {
background: url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/logo-biz.svg) no-repeat;
background-position: left center;
background-size: 8.3rem auto;
width: 8.3rem;
height: 4.3rem;
}
.top-container {
position: relative;
z-index: 11;
min-height: 7rem;
width: 100%;
flex-shrink: 0;
background: var(--dark-navigation);
}
.page-template-homepage .top-container {
height: 66vh;
overflow: hidden;
padding-top: 7rem;
}
@media screen and (max-width: 767px) {
.page-template-homepage .top-container {
height: 50vh;
}
}
.video-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
@media screen and (max-width: 800px) {
.page-template-homepage .top-container:has(.mobile-nav-show) {
height: auto !important;
min-height: 40vh;
}
.page-template-homepage .top-container:has(.mobile-nav-show) .video-container,
.page-template-homepage .top-container:has(.mobile-nav-show) .hero-wrapper {
opacity: 0;
}
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
.header-wrapper {
width:100%;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
right: 0;
display: block;
background-color: var(--dark-navigation);
transition: background-color 0.3s cubic-bezier(0.6, 0, 0.6, 1), transform 0.3s cubic-bezier(0.6, 0, 0.6, 1);
will-change: transform;
transform: translateY(0);
pointer-events: all;
}
.header--hidden .header-wrapper {
transform: translateY(-100%);
pointer-events: none;
}
.page-template-homepage .header-wrapper {
background-color: transparent;
}
.page-template-homepage .header--sticky .header-wrapper {
background-color: var(--dark-navigation);
}
.header-container {
position: relative;
width:100%;
color: white;
display: flex;
justify-content: space-between;
flex-direction: row;
align-items:center;
}
.header-bar {
display: flex;
width:100%;
margin: 0 auto;
padding:1.5rem 6.5rem;
}
.header-bar ul {
line-height: 1;
list-style: none;
align-items:center;
display: flex;
}
.header-bar ul li {
display: inline;
margin-right:2rem;
position: relative;
cursor: pointer;
}
.header-bar ul li:last-child {margin-right:0;}
.header-wrapper a {
position: relative;
z-index: 11;
text-decoration: none !important;
color:white;
}
.search .header-wrapper .menu-item-1427 > a,
.archive .header-wrapper .menu-item-1427 > a,
.single-post .header-wrapper .menu-item-1427 > a,
.header-wrapper .current_page_item > a,
.header-wrapper .current_page_parent > a {
text-decoration: underline !important;
text-decoration-thickness: 0.15em !important;
text-underline-offset: 0.3em !important;
}
.search .mobile-nav .menu-item-1427 > a,
.archive .mobile-nav .menu-item-1427 > a,
.single-post .mobile-nav .menu-item-1427 > a,
.mobile-nav .current_page_item > a,
.mobile-nav .current_page_parent > a {
text-decoration: underline !important;
text-decoration-thickness: 0.15em !important;
text-underline-offset: 0.3em !important;
}
.active {
color: rgb(0,255,196) !important;
background: rgb(15,48,59) !important;
box-shadow: 0 0 0 0px rgb(15,48,59) !important;
}
.header-bar ul .sub-menu {
position: absolute;
margin: auto;
top: 0;
right: 0;
line-height: 1.5;
padding-top: 2.5rem;
width: 17rem;
z-index: 1;
display:none;
}
.header-bar li.menu-item-has-children:hover > .sub-menu {
display:block;
}
.header-bar ul .sub-menu li,
.header-bar ul .sub-menu a {
display: block;
width: 100%;
}
.header-bar ul .sub-menu li {
margin: 0;
font-size: 1rem;
text-align: right;
background-color:var(--purple80);
}
.header-bar ul .sub-menu a {
color: #0f303b;
padding: 0.5rem 0.75rem;
font-family: "Inter-Black";
text-transform: uppercase;
transition: background 200ms ease;
}
.header-bar ul .sub-menu a:hover {
background-color:var(--yellow50);
}
.hero-wrapper {
position: absolute;
z-index: 100;
bottom: 2.5rem;
left: 0;
right: 0;
}
.hero-text.content {
margin: 0 auto !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.hero-text svg {
display: block;
margin-bottom:1rem;
width: 14rem;
height: auto;
fill: #F6D47F;
}
.hero-text p {
color: #F6D47F;
margin: 0;
}
.team-placeholder {
display: none;
}
.content-area {
background: var(--lightgrey);
margin: 2rem 0 3rem;
padding: 1.5em;
}
.banner-area {
background: #F6D47F;
margin: 2rem 0;
padding: 1.5em;
}
.banner-area p {
margin-bottom: 1rem;
}
.banner-area p:last-child {
margin: 0;
}
.banner-area .button-small {
display: inline-block;
border-color: #0f303b;
color: #0f303b;
}
.banner-area a:active .button-small,
.banner-area a:focus .button-small,
.banner-area a:hover .button-small {
border-color: var(--purple80);
color: var(--purple80);
} .mobile-nav {
background-color: var(--dark-navigation);
display: none;
width:100%;
padding-bottom:1rem;
z-index: 10000;
position: relative;
}
.mobile-nav-show {
display: block;
}
.mobile-nav ul {
display: flex;
flex-direction: column;
width:100%;
}
.mobile-nav li {
width: 100%;
text-align: right;
font-family: "Inter-Black";
}
.mobile-nav ul:not(.sub-menu) > li {
padding: 1rem 0;
font-size:1.7rem;
border-top: 1px solid rgba(255,255,255,0.2);
}
.mobile-nav a {display:block;color:white;padding:0 7vw;}
.mobile-nav a:hover {color:var(--purple80)}
.mobile-nav .sub-menu {
text-align: right;
font-family: "Inter-Black";
text-transform: uppercase;
font-size:1rem;
display: flex;
justify-content: flex-end;
flex-direction: column;
margin-top:1rem;
gap:0.75rem;
}
.menu-button {
position: relative;
background: var(--yellow50);
border: 0;
cursor: pointer;
width: 52px;
height: 52px;
padding: 0;
margin: 0;
color: var(--white);
display: none;
border-radius: 50%;
align-self: center;
box-sizing: content-box;
}
.menu-button span {
display: block;
height: 1px;
width: 26px;
background: var(--dark);
transition: all 0.15s ease;
position: absolute;
right: 13px;
transform: rotate(0deg);
}
.menu-button span:first-child {
width: 26px;
top: 22px;
}
.menu-button span:last-child {
width: 26px;
top: 30px;
}
.menu-x {
transition: 300ms ease;
background-color:var(--purple80);
}
.menu-x span:first-child {
transform: rotate(45deg);
top: 26px;
}
.menu-x span:last-child {
transform: rotate(-45deg);
top: 26px;
} @media screen and (min-width: 2101px) {html {font-size: 23px;}  }
@media screen and (max-width: 2100px) {html {font-size: 22px;}  }
@media screen and (max-width: 1900px) {html {font-size: 21px;}  }
@media screen and (max-width: 1600px) {html {font-size: 20px;}  }
@media screen and (max-width: 1400px) {html {font-size: 19px;}  }
@media screen and (max-width: 1300px) {html {font-size: 17px;}  }
@media screen and (max-width: 1100px) {html {font-size: 15px;}  }
@media screen and (max-width: 900px) {html  {font-size: 14px;}  }
@media screen and (max-width: 600px) {html  {font-size: 13px;}  }
@media screen and (max-width: 350px) {html  {font-size: 11px;}  }
@media screen and (max-width: 1200px) {
body {font-size: 0.9rem;}
.large, .lead {font-size:2rem;}
.content, .footer-content, .subnav-wrapper {padding-left:7vw;padding-right: 7vw;}
}
@media screen and (min-width: 801px) {
.mobile-nav {display: none}
}
@media screen and (max-width: 800px) {
.large, .lead {font-size:1.7rem;}
.teaser-title {font-size:1.7rem;}
nav {display: none;}
.menu-button{display: block;flex-shrink: 0;}
.header-container {align-self: auto}
}
@media screen and (max-width: 600px) {
.small {font-size:0.9rem}
body {font-size: 1.05rem;}
.medium {font-size:1.4rem}
} .loader {
position:fixed;
top:0;
left:0;
z-index:1000000;
overflow:hidden;
width:100%;
height:5px
}
.progress-bar {
height:5px;
background:#F6D47F;
transition:transform .25s;
will-change:transform
}
.loader-animation-leave-active {
transition:delay 1s
}
.portal-button {
position:absolute;
top:1.5rem;
right:1.5rem;
z-index:99999;
width:5.5rem;
height:5.5rem;
line-height:1.2;
background:#BD72D1;
border-radius:50%;
color:#0f303b;
cursor:pointer;
text-align:center;
text-transform:uppercase;
transition:box-shadow .2s cubic-bezier(.25,.76,.44,1)
}
.portal-button a {
display:flex;
align-items:center;
height:100%
}
.portal-button svg {
fill:#0f303b;
height:14px;
width:14px;
transform:translate(3px,1px)
}
.portal-button:hover {
box-shadow:0 0 0 .25em #BD72D1
}
.close-button {
position:absolute;
top:1.5rem;
right:1.5rem;
z-index:99999;
width:2.4rem;
height:2.4rem;
padding:0
}
.close-button svg {
position:absolute;
top:50%;
left:50%;
width:14px;
height:14px;
transform:translate(-50%,-50%)!important
}
@media screen and (max-width:1200px) {
.portal-button {
font-size:.8rem
}
}
@media screen and (max-width:900px) {
.close-button svg,
.portal-button svg {
width:12px;
height:12px
}
}
@media screen and (max-width:500px) {
.close-button svg,
.portal-button svg {
width:10px;
height:10px
}
}
.cls-1,
.cls-3 {
fill:none
}
.cls-2 {
clip-path:url(#clip-path)
}
.cls-3 {
stroke:#0f303b;
stroke-width:1.5px
}
.back-link {
margin:-1rem 0 0;
}
.single-post .back-link {
margin:0 0 -1rem;
}
.back-link a {
display: inline-block;
text-decoration: none!important;
}
.back-link .button-small {
padding:.2rem .6rem;
}
.home-link {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 7vw 4rem;
}
.holiday-info {
margin:0!important;
padding-top:1.5em!important
}
.team-wrapper {
min-height:20rem;
padding-bottom:2rem
}
.team-headline {
display:flex;
gap:2rem;
align-items:flex-start;
justify-content:space-between;
padding-bottom:3rem
}
.team-headline>* {
width:calc(50% - 2rem)
}
.team-details {
display:flex;
flex-wrap:wrap;
gap:4rem
}
.team-item {
display:flex;
gap:1.3rem;
width:calc(50% - 2rem)
}
.team-item picture {
display:block;
min-width:7.6rem
}
.team-item img {
height:7.6rem;
width:7.6rem;
border-radius:50%
}
.team-item .team-info {
flex:1;
}
.team-item .team-info p {
margin:0
}
.team-item .team-info strong > span {
margin-left:.3rem
}
.team-item .team-info .info-wrapper span {
display:block
}
.team-item .team-info .info-wrapper a {
border:0!important;
text-decoration:underline!important
}
.team-item .team-info .info-wrapper a:hover {
text-decoration:none!important
}
@media screen and (max-width:767px) {
.team-details {
flex-direction:column
}
.team-item {
width:100%
}
}
@media screen and (max-width:499px) {
.team-headline {
flex-direction:column;
gap:0
}
.team-headline>* {
width:100%
}
.team-details {
gap:3rem
}
}
.page-content {
padding:0 8rem
}
@media screen and (max-width:1200px) {
.page-content {
padding-left:7vw;
padding-right:7vw
}
}
.portrait-content {
padding:0 8rem
}
@media screen and (max-width:1200px) {
.portrait-content {
padding-left:7vw;
padding-right:7vw
}
}
.expandable-area {
height:auto;
}
.js .expandable-area {
height:0;
overflow: hidden;
will-change:height;
transition:height .3s cubic-bezier(.86,0,.07,1);
transform:translateZ(0)
}
.post-content-wrapper {
background:#fff;
}
.post-content,
.post-question {
width:100%;
padding-bottom:1rem !important;
padding-top:1rem !important;
margin:0 auto !important;
}
.post-content {
color:#0f303b;
background:#fff;
display:flex;
flex-direction:column;
transition:color .3s ease,background-color .2s ease;
}
.post-faq,
.post-section,
.post-hint-wrapper {
max-width:50rem;
}
.post-faq {
padding-top:1em;
}
.post-section {
margin-bottom:1.2rem;
}
.post-section:empty {
display: none;
}
.post-section p:last-child {
margin-bottom:0;
}
.post-accordion-list {
padding-bottom:.8rem;
}
.post-hint-wrapper {
color:#fff;
background-color:#0f303b;
padding:1rem
}
.post-hint-headline {
cursor:pointer;
display:flex;
align-content:flex-start
}
.post-hint-headline>h3 {
flex:1;
line-height:40px;
margin:0;
padding-right:1rem
}
.post-hint-trigger {
align-items:center;
display:flex;
justify-content:flex-end;
height:40px;
width:40px
}
.post-hint-text {
padding-top:1rem
}
.post-question-wrapper {
background-color:#F6D47F;
margin-top:.2rem
}
.post-question {
color:#0f303b;
}
.search-results {
border-top:1px solid hsla(0,0%,100%,.25);
padding-bottom:0
}
.animatable>:first-child {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.05s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(2) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.1s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(3) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.15s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(4) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.2s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(5) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.25s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(6) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.3s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(7) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.35s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(8) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.4s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(9) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.45s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(10) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.5s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(11) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.55s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(12) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.6s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(13) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.65s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(14) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.7s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(15) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.75s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(16) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.8s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(17) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.85s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(18) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.9s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(19) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:.95s;
transform:translateY(1rem);
opacity:0
}
.animatable>:nth-child(20) {
animation:category-fade-up-3e2646bf .5s cubic-bezier(.23,1,.32,1) both;
animation-delay:1s;
transform:translateY(1rem);
opacity:0
}
@keyframes category-fade-up-3e2646bf {
50% {
transform:translateY(1rem);
opacity:0
}
to {
transform:translateY(0);
opacity:1
}
}
.teaser {
color:#0f303b;
background-color:#BD72D1;
padding:1rem 0;
display:flex;
border-bottom:1px solid #0f303b;
height:calc(20vh - 3rem);
min-height:5.2rem;
align-items:center;
transition:background .2s ease
}
.teaser, .teaser h1 {
position:relative;
margin:0 !important;
}
.teaser:hover {
background:#F6D47F;
}
.teaser .teaser-title.content {
width:100%;
padding-bottom:0 !important;
padding-top:0 !important;
margin:0 auto !important;
}
.teaser h1:after {
position:absolute;
top:50%;
right:0;
content:"";
background-size:1.6rem 1.6rem;
height:1.6rem;
width:1.6rem;
margin-top:-0.8rem;
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/arrow.svg);
transition:transform .2s ease
}
.teaser:hover h1:after {
transform:translateX(6px)
}
.teaser-item {
display:block
}
.close-link {
border-bottom:.1em solid #fff
}
.close-link:hover {
border-color:transparent;
cursor:pointer
}
.button,
.button-small,
.logo,
.teaser,
.teaser-small {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none
}
input {
-webkit-border-radius:0
}
.caption-text>p,
p.wp-caption-text {
margin-top:.5em;
font-size:.85em
}
p:empty {
display:none
}
.button {
display:inline-block;
padding:.9rem 1.5rem;
border:0!important;
border-radius:50px;
text-align:center;
white-space:nowrap;
cursor:pointer;
color:#0f303b!important;
transition:box-shadow .2s cubic-bezier(.25,.76,.44,1),background-color .2s cubic-bezier(.25,.76,.44,1)
}
.button,
.button:hover {
background-color:#F6D47F
}
.button:hover {
box-shadow:0 0 0 .25em #F6D47F
}
.button:active {
box-shadow:0 0 0 0 #F6D47F;
transition:all 0ms;
filter:brightness(97%)
}
select.button {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
border-radius:0;
padding-right:3em;
position:relative;
text-align:left;
font-size:1rem;
background-image:linear-gradient(45deg,transparent 50%,#0f303b 0),linear-gradient(135deg,#0f303b 50%,transparent 0);
background-position:calc(100% - 24px) calc(1.4em),calc(100% - 16px) calc(1.4em);
background-size:11px 8px,9px 8px;
background-repeat:no-repeat
}
select.button:focus-visible {
box-shadow: none;
}
select.button>option {
background:#fff
}
.button-small {
border:1px solid #fff;
border-radius:3rem;
padding:.8rem 1.4rem;
font-size:.8rem;
color:#fff;
margin:0 auto;
transition:border .2s ease,color .2s ease,background-color .2s ease;
display:flex;
align-items:center
}
.button-small:hover {
color:#F6D47F;
border-color:#F6D47F;
cursor:pointer;
background-color:rgba(255,255,139,.08)
}
.button-small.with-icon {
padding-bottom:0;
padding-top:0
}
.button-small.with-icon>span {
align-items:center;
background-size:18px 18px;
background-position:0;
background-repeat:no-repeat;
display:inline-flex;
height:100%;
padding-left:1rem!important
}
.button-small.location>span {
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/location-white.svg)
}
.button-small.location:hover>span {
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/location-dark.svg)
}
.info-content a,
.info-content a[href*="ueber-18.zh.ch"],
.post-content a[href*="ueber-18.zh.ch"],
.post-hint-content a {
border:none!important
}
.info-content a,
.post-hint-content a {
text-decoration:underline;
color:#fff!important
}
.info-content a:hover,
.info-content a[href*="ueber-18.zh.ch"],
.post-content a[href*="ueber-18.zh.ch"],
.post-hint-content a:hover,
.post-hint-content a>span,
.post-hint-content span[style*=text-decoration] {
text-decoration:none!important
}
.info-content a[href*="ueber-18.zh.ch"],
.post-content a[href*="ueber-18.zh.ch"] {
color:#e24de2!important
}
.info-content .andelfingen-button a,
.info-content .default-button a,
.info-content .uster-button a,
.info-content .winterthur-button a,
.post-content .andelfingen-button a,
.post-content .default-button a,
.post-content .uster-button a,
.post-content .winterthur-button a {
border-radius:50px;
background:#fff!important;
border:1px solid #0f303b!important;
color:#0f303b!important;
display:inline-block;
font-family: "Inter-Black";
font-size:.7rem;
line-height:1;
letter-spacing:.04em;
padding:.4rem 1.5rem .3rem .5rem;
position:relative;
text-decoration:none!important;
text-transform:uppercase;
width:-moz-fit-content;
width:fit-content
} .info-content .andelfingenr-button a:hover,
.info-content .default-button a:hover,
.info-content .uster-button a:hover,
.info-content .winterthur-button a:hover,
.post-content .andelfingen-button a:hover,
.post-content .default-button a:hover,
.post-content .uster-button a:hover,
.post-content .winterthur-button a:hover {
background:#F6D47F!important
}
.info-content .andelfingen-button a:after,
.info-content .default-button a:after,
.info-content .uster-button a:after,
.info-content .winterthur-button a:after,
.post-content .andelfingen-button a:after,
.post-content .button:after,
.post-content .default-button a:after,
.post-content .uster-button a:after,
.post-content .winterthur-button a:after {
content:"";
display:inline-block;
margin-left:.2rem;
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/arrow.svg);
background-size:.8rem .8rem;
height:.8rem;
width:.8rem
}
.post-content .button:after {
display:inline-block;
margin-left:.2rem
}
.info-content .andelfingen-button a:after,
.info-content .default-button a:after,
.info-content .uster-button a:after,
.info-content .winterthur-button a:after,
.post-content .andelfingen-button a:after,
.post-content .default-button a:after,
.post-content .uster-button a:after,
.post-content .winterthur-button a:after {
position:absolute;
top:50%;
right:.4rem;
margin-top:-.4rem
}
.post-content ol,
.post-content ul {
margin-bottom:1em
}
.close {
width:2.3rem;
height:2.3rem;
padding:0;
content:" ";
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/plus-white.svg);
background-size:19px 19px;
background-position:50%;
background-repeat:no-repeat;
margin:0 auto;
transform:rotate(45deg);
background-color:#0f303b
}
.close:hover {
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/plus-yellow.svg)
}
img {
display:block;
max-width:100%;
height:auto
}
.clearfix:after {
display:table;
clear:both;
content:""
}
::-moz-placeholder {
color:#999
}
::placeholder {
color:#999
}
@supports (-ms-ime-align:auto) {
.video-container video {
position:absolute;
top:50%;
left:50%;
height:auto;
min-height:100%;
min-width:100%;
width:auto;
transform:translate(-50%,-50%)
}
}
.content-wrapper {
position:relative;
z-index:11;
padding-bottom:155px;
flex:1 0 auto
}
.content-wrapper.is-clipped {
overflow-y:hidden
}
.page-id-42 .content-wrapper {
padding:0
}
.content-wrapper .text-wrapper {
overflow-x:hidden
}
.teaser-small {
background-color:#BD72D1;
display:block;
cursor:pointer;
border-bottom:1px solid #0f303b;
height:7vh;
min-height:3rem;
transition:background .2s ease;
width:100%;
}
.teaser-small:active,
.teaser-small:hover {
background:#F6D47F;
}
.teaser-headline.content {
display:flex;
align-items:center;
width:100%;
height:100%;
padding-bottom:.5rem !important;
padding-top:.5rem !important;
margin:0 auto !important;
}
.teaser-headline h2 {
color:#0f303b;
margin-bottom:0;
text-transform:none
}
.teaser-headline:after {
display:inline-block;
content:"";
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/plus.svg);
background-size:16px 16px;
background-position:center center;
background-repeat:no-repeat;
height:22px;
min-width:22px;
margin-left:.5rem;
transition:transform .2s ease;
border:1px solid #0f303b;
border-radius:22px;
box-sizing:inherit;
padding:0
}
.teaser-headline:hover:after {
transform:scale(1.1)
}
.post-teaser.is-expanded .teaser-headline:after,
.teaser-headline:active:after {
transform:rotate(45deg);
background-color:#0f303b;
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/plus-yellow.svg)
}
.post-teaser.is-expanded .teaser-small {
background:#F6D47F;
position:sticky;
top:0;
z-index:111
}
.teaser-small .teaser-title {
width:100%;
margin-bottom:0
}
.post-accordion-item:not(:first-child) {
margin-top:1em
}
.post-accordion-item h3,
.post-hint h3 {
margin:0;
padding-left:2rem;
position:relative
}
.post-accordion-item h3 {
cursor:pointer
}
.post-accordion-item h3:before,
.post-hint-trigger:after,
.post-hint h3:before {
content:"";
background-repeat:no-repeat
}
.post-accordion-item h3:before,
.post-hint h3:before {
position:absolute;
top:50%;
left:0;
transition:transform .2s ease;
box-sizing:inherit
}
.post-accordion-item h3:before,
.post-hint-trigger:after {
background-size:16px 16px;
background-position:center center;
border-radius:22px;
height:22px;
min-width:22px
}
.post-accordion-item h3:before {
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/plus.svg);
border:1px solid #0f303b;
margin-top:-11px
}
.post-hint h3:before {
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/goodtoknow-white.svg);
background-position:50%;
height:24px;
min-width:24px;
margin-top:-12px
}
.post-hint-trigger:after {
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/plus-white.svg);
border:1px solid #fff;
transition:transform .2s ease;
box-sizing:inherit
}
.post-accordion-item h3:hover:before,
.post-hint-headline:hover .post-hint-trigger:after {
transform:scale(1.1)
}
.post-accordion-item h3.is-expanded:before,
.post-accordion-item h3:active:before,
.post-hint-headline.is-expanded .post-hint-trigger:after,
.post-hint-headline:active .post-hint-trigger:after {
transform:rotate(45deg)
}
.post-accordion-content > p:first-child {
margin-top: 1rem;
}
.search main,
.archive main,
.error404 main,
.single-post main,
.page-id-42 main {
background:#0F303B;
color:white;
}
.white-wrapper {
width: 100%;
background:#fff;
}
.white-wrapper section.content {
padding-bottom:3rem!important;
padding-top:3rem!important;
margin:0 auto!important;
}
.infoportal-wrapper.content {
padding-bottom:3rem!important;
padding-top:3rem!important;
margin:0 auto!important;
}
.infoportal-wrapper section {
margin:0;
}
.contact-details {
display:flex;
flex-direction:row;
align-items:flex-start;
gap:1.4rem
}
.contact-image {
width:7.6rem
}
.contact-image img {
width:100%!important;
height:auto!important;
border-radius:50%
}
.contact-links {
flex:1
}
.contact-links p.large {
margin-bottom:1.3rem
}
.contact-links ul {
list-style:none;
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:.35rem
}
.contact-links li {
display:inline-block;
}
.faq-wrapper {
padding-top:3rem;
width:100%;
content-visibility:auto
}
.faq-item {
position:relative;
margin-top:2rem;
padding-bottom:2rem;
border-bottom:1px solid #576e75
}
.faq-item:first-child {
margin-top:0
}
.faq-item:last-child {
border-bottom:none
}
.faq-item .lead {
margin:0
}
.faq-item .button {
position:absolute;
top:0;
right:4px;
min-width:0;
width:2.4rem;
height:2.4rem;
margin:0;
padding:0
}
.faq-item .button svg {
display:inline-block;
width:14px;
height:14px;
transform:translateY(2px)!important
}
@media screen and (max-width:900px) {
.faq-item .button svg {
width:12px;
height:12px
}
}
@media screen and (max-width:500px) {
.faq-item .button svg {
width:10px;
height:10px
}
}
.faq-item.expanded .button {
background-color:#0f303b
}
.faq-item.expanded:has(.info-content) .button {
background-color: var(--dark-navigation);
}
.faq-item.expanded .button:hover {
box-shadow:0 0 0 .25em #0f303b
}
.faq-item .button .minus-icon,
.faq-item.expanded .button .plus-icon {
display:none
}
.faq-item.expanded .button .minus-icon {
display:inline-block
}
.faq-item .button .cls-1,
.faq-item .button .cls-3 {
fill:none
}
.faq-item .button .cls-2 {
clip-path:url(#clip-path)
}
.faq-item .button .cls-3 {
stroke:#0f303b;
stroke-width:1.5px
}
.faq-item.expanded .button .cls-3 {
stroke:#F6D47F
}
.faq-details {
height:0;
overflow:hidden;
will-change:height;
transition:height .3s cubic-bezier(.86,0,.07,1);
transform:translateZ(0)
}
.faq-trigger .is-expanded,
.faq-item.expanded .faq-trigger .not-expanded {
display: none;
}
.faq-item.expanded .faq-trigger .is-expanded {
display: block;
}
.faq-question {
padding-right:4rem;
cursor:pointer
}
.faq-question p.subtitle {
margin-bottom:.5rem;
}
.faq-answer {
max-width:50rem;
padding-top:2em
}
.scroll-top {
margin:0;
}
.scroll-top svg {
display:inline-block;
width:1.2em;
height:1.2em;
transform:translateX(-.2em);
fill:currentcolor
}
.portal-page {
padding:1.2rem var(--page-padding) 2rem
}
.portal-content {
max-width:35rem
}
.portal-page h1 {
margin-top:0
}
.portal-page .close {
float:right;
margin-top:-.2rem;
margin-right:-.2rem
}
.search-wrapper {
position:relative;
display:flex;
border:solid hsla(0,0%,100%,.25);
border-width:1px 0;
margin-top: 7.5rem;
}
.search-input,
.search-wrapper {
width:100%;
background-color: var(--dark-navigation);
}
.search-wrapper .content {
width:100%;
margin:0 auto
}
.search-input {
padding:.7rem 2rem;
color:#fff;
font-size:1rem;
line-height:1;
white-space:nowrap;
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/search-grey.svg);
background-repeat:no-repeat;
background-size:1.4rem 1.4rem;
background-position-x:.3rem;
background-position-y:center;
outline:none;
border:0
}
.search-input:hover,
.mobile .search-wrapper:has(.search-input:hover) {
background-color:#183b47
}
.search-input:focus,
.mobile .search-wrapper:has(.search-input:focus) {
background-color:#fff;
}
.search-input:focus {
color:#0f303b;
white-space:nowrap;
background-image:url(//ueber-18.zh.ch/wp-content/themes/ueber18/dist/images/search.svg);
outline:none
}
input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
display:none;
height:0;
width:0
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display:none
}
.wp-content div {
clear:both;
width:100%!important
}
.wp-content div a:hover {
color:#0D2A34 !important;
}
.wp-content article,
.wp-content aside,
.wp-content div:not(.embed-container),
.wp-content footer,
.wp-content header,
.wp-content main,
.wp-content section {
position:static!important;
float:none!important;
margin:0!important;
padding:0!important
}
.wp-content :not(br):not(img):not(iframe):empty {
display:none
}
.wp-content p {
text-wrap: pretty;
}
.post-content ul,
.wp-content>ul {
list-style-type: disc;
padding-left:20px
}
.post-content ol,
.wp-content>ol {
padding-left:30px
}
.embed-container {
margin-bottom:1.5rem;
position:relative;
padding-bottom:56.25%;
padding-top:1.5rem;
overflow:hidden;
max-width:100%;
height:auto
}
.whatsapp-consent {
align-items:center;
display:none;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:1111;
background:rgba(0,0,0,.5);
justify-content:center
}
.modal-visible .whatsapp-consent {
display:flex
}
.whatsapp-modal {
background:#fff;
padding:2.5rem;
width:50%
}
.whatsapp-actions {
display:flex;
gap:.8rem
}
.location-overlay {
align-items:center;
background:rgba(0,0,0,.5);
bottom:0;
display:none;
justify-content:center;
left:0;
position:fixed;
right:0;
top:0;
z-index:9999
}
.page-id-42.modal-enabled .location-overlay {
display:flex
}
.location-modal {
background:#F6D47F;
color:#0f303b!important;
max-width:380px;
padding:2rem
}
.location-modal h2 {
margin-top:0;
text-transform:none
}
.location-options {
display:flex;
flex-direction:column;
gap:.5rem;
padding-bottom:1rem
}
.location-options>label {
align-items:center;
cursor:pointer;
display:flex;
gap:.5rem;
width:-moz-fit-content;
width:fit-content
}
.location-options input {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background:transparent;
border-radius:50%;
border:1px solid #0f303b;
cursor:pointer;
position:relative;
height:20px;
width:20px
}
.location-options input:checked:after {
background:#0f303b;
border-radius:50%;
content:"";
height:10px;
left:50%;
margin:-5px 0 0 -5px;
position:absolute;
top:50%;
width:10px
}
.location-modal .button-small {
background-color:transparent;
border-color:#0f303b;
color:#0f303b;
justify-content:center;
width:60%
}
.location-modal .button-small:hover {
background-color:#0f303b;
color:#fff
}
.andelfingen-button,
.uster-button,
.winterthur-button {
display:block!important
}
@media screen and (max-width:1200px) {
.button {
padding:1.1em 1.5em
}
}
@media screen and (max-width:767px) {
.button {
padding:1.2em 2em
}
.contact-details {
align-items:center;
flex-direction:column;
text-align:center;
gap:1.5rem
}
.contact-image {
flex:1
}
.contact-links ul {
align-items:center;
flex-direction:column;
gap:1rem
}
.contact-links li {
display:block;
font-size:.9rem
}
}