/* Line #0 modules/_config.grid.css */
:root{ --raster:16px; --raster05:8px; --raster1:16px; --raster1k5:24px; --raster2:32px; --raster3:48px; --raster4:64px; --raster5:80px; --raster6:96px; --raster7:112px; --raster8:128px; --raster9:144px; --raster10:160px; --raster11:176px; --raster12:192px; --raster13:208px; --raster14:224px; --raster15:240px; --raster16:256px; --raster17:272px; --raster18:288px; --raster19:304px; --raster20:320px; } .grid{ display:grid; grid-gap:var(--raster); } .grid-content-inner{ text-align:center; padding:0 calc(16px + (64 - 16) * ((100vw - 320px) / (768 - 320))); } @media (min-width:768px){ .grid-content-inner{ padding:0 calc(64px + (512 - 64) * ((100vw - 768px) / (1920 - 768))); } } .grid-sidebar-right{ grid-row-gap:0; grid-template-columns:0 auto 0; grid-template-rows:auto auto var(--raster2) auto; } .grid-sidebar-right .bfgad-sidebar{ grid-column:2 / 3; grid-row:4 / 5; } .grid-content-only{ min-height:105vh; grid-template-columns:calc(16px + (64 - 16) * ((100vw - 320px) / (768 - 320))) auto calc(16px + (64 - 16) * ((100vw - 320px) / (768 - 320))); grid-template-rows:var(--raster5) auto 1fr; grid-gap:0; } .grid-content-only .content{ grid-column:2 / 3; grid-row:2 / 3; } .grid-content-only .content > :first-child{ margin-top:0; } .grid-content-only .content form > :first-child{ margin-top:0; } .grid-content-only .branding-background { grid-column:1 / 4; grid-row:3 / 4; } .grid-content-only .content-footer{ grid-column:1 / 4; grid-row:3 / 4; } .content-footer { min-height:var(--raster10); } @media (min-width:415px){ .grid{ grid-gap:var(--raster2); } .grid-content-only{ } } @media (min-width:500px){ .grid-content-only{ grid-template-rows:var(--raster6) auto 1fr; } } @media (min-width:620px) { .grid-content-inner{ } .grid-sidebar-right{ grid-template-rows:auto auto; grid-template-columns:0 auto 0 0; } body.cookies-allowed .grid-sidebar-right{ grid-template-columns:0 auto var(--raster10) 0; } .grid-sidebar-right .bfgad-sidebar{ grid-column:3 / 4; grid-row:2 / 3; } } @media (min-width:680px){ .grid-sidebar-right{ grid-template-columns:0 auto 0 0; } body.cookies-allowed .grid-sidebar-right{ grid-template-columns:0 auto var(--raster10) 0; } } @media (min-width:768px){ .grid-content-only{ grid-template-columns:calc(64px + (512 - 64) * ((100vw - 768px) / (1920 - 768))) auto calc(64px + (512 - 64) * ((100vw - 768px) / (1920 - 768))); grid-template-rows:15vw auto 1fr; } .loggedin main{ min-height:100vh; } } @media (min-width:948px){ .grid-sidebar-right{ grid-template-columns:15vw auto 0 15vw; } body.cookies-allowed .grid-sidebar-right{ grid-template-columns:var(--raster2) auto 300px var(--raster2); } } @media (min-width:1024px) { .grid-content-inner{ } } @media (min-width:1280px){ .grid{ grid-gap:var(--raster3); } .grid-sidebar-right{ grid-template-columns:19vw auto 0px 19vw; } body.cookies-allowed .grid-sidebar-right{ grid-template-columns:var(--raster4) auto 300px var(--raster4); } .grid-content-only{ } } @media (min-width:1366px) { .grid-content-only{ grid-template-rows:5vw auto 1fr; } } @media (min-width:1440px){ .grid-content-inner{ } .grid{ grid-gap:var(--raster2); } .grid-sidebar-right{ grid-template-columns:19vw auto 0px 19vw; } body.cookies-allowed .grid-sidebar-right{ grid-template-columns:var(--raster8) auto 300px var(--raster8); } } @media (min-width:1620px){ .grid{ grid-gap:var(--raster3); } .grid-content-inner{ padding:0 25vw; } .grid-sidebar-right{ grid-template-columns:19vw auto 0px 19vw; } body.cookies-allowed .grid-sidebar-right{ grid-template-columns:var(--raster10) auto 300px var(--raster10); } } @media (min-width:1920px){ .grid{ grid-gap:var(--raster3); } .grid-content-inner{ padding:0 30vw; } .grid-sidebar-right{ grid-template-columns:var(--raster15) auto 0px var(--raster15); } body.cookies-allowed .grid-sidebar-right{ grid-template-columns:var(--raster15) auto 300px var(--raster15); } } @media (min-aspect-ratio:1/1){ .grid-content-only{ grid-template-rows:15vw auto 1fr; } } @media (min-aspect-ratio:4/3){ .grid-content-only{ grid-template-rows:10vw auto 1fr; } } @media (max-width:375px) { .loggedin main{ min-height:calc((var(--vh, 1vh) * 97) + 12px); } } /* Line #1 modules/_config.colors.css */
:root{ --color-white:#ffffff; --color-black:#1A1F37; --color-gray:#3F4664; --color-brand:#007b89; --color-action-primary:#007b89; --color-action-primary-darker:#007b89; --color-action-secondary:#007b89; --color-action-secondary-darker:#007b89; --color-background-white:#ffffff; --color-background-sky:#fffffd; --color-background-gray:#EEF2FF; --color-background-gray-darker:#E1E5F9; --color-border-gray:#A4ABC2; --color-border-gray-darker:#959CB6; --color-highlight: rgba(255,255,255,0.1); } /* Line #2 modules/_config.reset.css */
*, *:before, *:after { box-sizing:border-box; padding:0; margin:0; -webkit-font-smoothing:antialiased; word-break:break-word; line-break:loose; } body,html{ height:100%; background:#fffffd; color:var(--color-black); min-width:320px; } a,button{ cursor:pointer; } /* Line #3 modules/_config.shadows.css */
:root{ --shadow-paper-level1: 0px 0px 2px 0px rgb(35 40 72 / 10%), 0px 2px 2px 0px rgb(46 58 107 / 5%), 0px 3px 1px -2px rgb(46 58 107 / 7%), 0px 1px 12px 0px rgb(0 164 186 / 10%); --shadow-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; --shadow-clickable-default: 0 12px 10px -5px rgb(0 164 186 / 10%), 0 0 3px 0 rgb(35 53 73 / 10%), 0 2px 4px 0 rgb(0 164 186 / 10%); --shadow-clickable-hover: 0 16px 8px -8px rgb(0 164 186 / 10%), 0 2px 4px 0 rgb(35 53 73 / 10%), 0 0px 16px 0 rgb(0 164 186 / 10%); --shadow-clickable-active: 0 16px 10px 0px rgb(0 164 186 / 10%), 0 0 3px 0 rgb(35 53 73 / 10%), 0 2px 12px 0 rgb(0 164 186 / 10%); } /* Line #4 modules/_config.typo.css */
 @font-face { font-family:'BFG'; font-style:normal; font-weight:700; font-display:swap; src: url('../fonts/montserrat-v14-latin-700.woff2') format('woff2'), url('../fonts/montserrat-v14-latin-700.woff') format('woff'); } @font-face { font-family:'BFG'; font-style:normal; font-weight:500; font-display:swap; src: url('../fonts/montserrat-v14-latin-500.woff2') format('woff2'), url('../fonts/montserrat-v14-latin-500.woff') format('woff'); } html,body,textarea,input,button,select{ font-family:'BFG','Helvetica Neue', 'Helvetica', 'Arial'; font-style:normal; font-weight:500; font-size:15px; line-height:1.5; text-rendering:optimizeLegibility; } @media (min-width:411px) { html,body,textarea,input,button,select{ font-size:16px; } } @media (min-width:768px) { html,body,textarea,input,button,select{ font-size:17px; } } @media (min-width:1920px) { html,body,textarea,input,button,select{ font-size:19px; } } h1,h2,h3,h4,h5,p { margin-bottom:1em; } .headline-site-big, .headline-site, .headline-big, .headline-mid, .headline-small, dt, .hgroup-site-headline { margin:2rem 0 0.5em; line-height:1.25; font-weight:700; -webkit-font-smoothing:antialiased; } .hgroup-site-headline{ margin:0 0 0.25em; } .hgroup-site-subline{ margin:0rem 0 1em; line-height:1.25; -webkit-font-smoothing:antialiased; } .headline-big, .headline-mid,.font-content-nav { line-height:1.5; } .button,.font-nav,.button-link,.font-cross-nav, .snackbar-message-link, .acordeon-label::after, .tablist-tab, .content-options-label { font-weight:700; letter-spacing:0.25px; -webkit-font-smoothing:antialiased; } .font-bold,.switch-label,.checkbox-label{ font-weight:700; -webkit-font-smoothing:antialiased; } .font-normal,.font-content-nav,.switch-label::after,.checkbox-label::after,sup,.cardslider-c-title,.headline-small.pl-i-text { font-weight:500; } .font-nav,.font-content-nav,.font-cross-nav,.snackbar-message-link, .acordeon-label::after{ text-decoration:none; } .inline-link:hover,.inline-link:focus,.inline-link:active{ text-decoration:underline; outline:none; -webkit-tap-highlight-color:var(--color-highlight); } h1,h2,h3,h4,h5 { display:block; font-size:inherit; font-weight:inherit; } .headline-site-big, .headline-site, .headline-big, .headline-mid, .headline-small, .hgroup-site-headline, .hgroup-site-subline{ display:block; } .headline-site-big{ font-size:4rem !important; } .headline-site, .hgroup-site-headline{ font-size:2.2rem !important; } .headline-big, .hgroup-site-subline{ font-size:1.65rem !important; } .headline-mid,.font-big{ font-size:1.4rem !important; } .headline-small{ font-size:1rem !important; } .button,.font-small,.font-nav,small,.a-small,.button-link,.font-cross-nav,.snackbar-message-link, .acordeon-label::after,.checkbox-description,.pl-i-desc, .tablist-tab, .content-options-label { font-size:0.85rem !important; } .button-link.a-small{ font-size:0.6666rem !important; } .font-content-nav,.acordeon-label-title{ font-size:1.25rem !important; } @media (min-width:569px) { .headline-site, .hgroup-site-headline { font-size:2.444rem !important; } .headline-big, .hgroup-site-subline { font-size:1.777rem !important; } } @media (min-width:768px) { .headline-site, .hgroup-site-headline { font-size:2.827rem !important; } .headline-big, .hgroup-site-subline { font-size:1.999rem !important; } .headline-mid,.font-big,.acordeon-label-title{ font-size:1.414rem !important; } .button-link.a-small{ font-size:11px !important; } } @media (min-width:1620px) { .headline-site, .hgroup-site-headline { font-size:3rem !important; } .headline-big, .hgroup-site-subline { font-size:2.25rem !important; } .headline-mid,.font-big,.acordeon-label-title{ font-size:1.5rem !important; } } a{ color:var(--color-black); -webkit-tap-highlight-color:var(--color-highlight); text-decoration:underline; text-decoration-color:var(--color-action-primary); text-underline-offset:0.15em; text-decoration-thickness:0.15em; } a:hover{ color:var(--color-action-primary); } dd,p{ color:var(--color-black); line-height:1.65; } .font-nav,.button-link{ color:var(--color-action-primary); } .font-content-nav{ color:var(--color-black); } textarea::placeholder,input::placeholder,option::placeholder,select::placeholder{ color:var(--color-border-gray-darker); } /* Line #5 modules/_config.animations.css */
@keyframes fade-in-from-bottom{ from { opacity:0; transform:translateY(12px); } 50% { opacity:0; } to { opacity:1; transform:translateY(0); } } @keyframes animation-loading-bar { from { transform:translateX(-50%) scaleX(0.1); } 50% { transform:scaleX(0.7); } to { transform:translateX(75%) scaleX(0.1); } } @keyframes animation-spinner { to { transform:rotate(360deg); } }/* Line #7 modules/button.css */
button{ -webkit-tap-highlight-color:var(--color-highlight); outline:none; } .button{ color:var(--color-white); min-height:36px; line-height:36px; padding:4px var(--raster1k5); border-radius:var(--raster05); min-width:88px; display:inline-flex; width:fit-content; box-sizing:border-box; align-items:center; justify-content:center; border:2px solid transparent; cursor:pointer; outline:none; position:relative; user-select:none; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-decoration:none; -webkit-appearance:none; background-color:var(--color-action-primary); outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; transition:var(--shadow-transition); margin-bottom:var(--raster); max-width:calc(100vw - 80px); } @media (min-width:569px) { .button{ min-height:44px; line-height:44px; padding:0 var(--raster2); border-radius:var(--raster05); min-width:88px; } } .form-loading .button{ padding-left:48px; transition:all .25s ease-in-out; background:var(--color-white); color:var(--color-black); } .form-loading .button::before{ opacity:1; animation:animation-spinner .6s linear infinite; transition:opacity 0.2s ease-in-out; content:""; position:absolute; left:11px; top:8px; box-sizing:border-box; width:28px; height:28px; border-radius:50%; border:1px var(--color-action-primary) solid; border-top-color:var(--color-brand); border-right-color:var(--color-action-secondary); border-bottom-color:var(--color-brand); z-index:50; } .button:hover{ box-shadow:var(--shadow-clickable-hover); color:var(--color-background-white); } .button:active,.button:focus{ background-color:var(--color-action-primary-darker); box-shadow:var(--shadow-clickable-active); } .button-outline{ border-color:var(--color-action-primary) !important; background:transparent !important; color:var(--color-action-primary) !important; -webkit-tap-highlight-color:var(--color-highlight); } .button-outline:hover,.button-outline:focus,.button-outline:active{ border-color:transparent !important; background:var(--color-action-primary) !important; color:var(--color-white) !important; transition:all 0.25s ease-in-out; -webkit-tap-highlight-color:var(--color-highlight); } .button-small{ padding:0 var(--raster1); min-height:var(--raster2); line-height:var(--raster2); } .button-link{ cursor:pointer; display:inline-flex; text-overflow:ellipsis; overflow:hidden; padding:4px var(--raster); border:1px solid transparent; border-radius:var(--raster05); text-decoration:none; } .button-link:hover, .button-link:focus, .button-link:active { background-color:rgba(255,255,255,0.3); text-decoration:none; outline:none; -webkit-tap-highlight-color:var(--color-highlight); }/* Line #8 modules/helper.css */
 .fade-in,.hideonfirstpaint{ visibility:visible !important; opacity:0; animation:fade-in-from-bottom 0.5s ease-in-out 0.25s 1 forwards; } .mainnav.hideonfirstpaint,.searchfilter.hideonfirstpaint{ opacity:1; animation:none; } footer{ opacity:1; } @media (max-width:411px){ .hide-mobile{ display:none; } } img.emoji { height:1em; width:1em; margin:0 .25em 0 .2em; vertical-align:-0.1em; transform:scale(1.3); } .build{ color:#ccc; position:absolute; top:0; font-size:9px; }/* Line #9 modules/iconbutton.css */
.iconbutton{ background-position:50% 50%; background-repeat:no-repeat; height:48px; padding-top:48px; width:48px; overflow:hidden; border-radius:24px; cursor:pointer; transition:.2s ease-in-out background-color; background-color:var(--color-white); outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; transition:var(--shadow-transition); } .iconbutton:hover,.iconbutton:focus,.iconbutton:target,.iconbutton:active{ box-shadow:var(--shadow-clickable-hover); } .iconbutton:active{ box-shadow:var(--shadow-clickable-active); }/* Line #11 modules/ui.appbar.css */
@media (max-width:768px) { .loggedin .appbar.show-only-logged-in{ display:block !important; } .appbar { position:fixed; height:var(--raster3); top:0; left:0; width:100vw; background:linear-gradient( var(--color-background-sky), var(--color-background-white) ); z-index:850; outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; box-shadow:var(--shadow-paper-level1); } .appbar-back, .appbar-options { display:block; width:40px; padding-top:40px; margin:4px; height:0; overflow:hidden; background-image:url('../img/icons/chevron-left-red.svg'); background-position:center center; background-repeat:no-repeat; position:absolute; left:0; top:0; } .appbar-back:focus, .appbar-back:active, .appbar-options:focus, .appbar-options:active { background-color:var(--color-background-gray); border-radius:50%; } .appbar-options { left:auto; right:0; background-image:url('../img/icons/options-gray.svg'); } .appbar-title { line-height:var(--raster3); text-align:center; margin:0; } .content-options, .content-options-wrapper { display:none; } } @media (min-width:769px) { .appbar-options { display:none; } .content-options-wrapper { grid-column:3 / 4; grid-row:2 / 3; text-align:right; padding-right:36px; } .content-options { display:inline-block; width:40px; padding-top:40px; height:0; overflow:hidden; background-image:url('../img/icons/options-gray.svg'); background-position:center center; background-repeat:no-repeat; position:sticky; top:24px; background-color:var(--color-background-gray); border-radius:20px; border:none; clear:both; float:right; } .content-options:focus, .content-options:active { background-color:var(--color-background-gray); border-radius:50%; } .content-options-wrapper #nachrichten-optionsmenu { position:sticky; top:68px; transform:translateX(-4px); right:auto; display:inline-block; float:right; } .content-options-label { background-color:red; display:inline-block; position:absolute; line-height:40px; cursor:pointer; color:var(--color-gray); width:137px; padding-left:20px; background:var(--color-background-gray); border-radius:6px; text-align:left; right:36px; } .appbar { display:flex; flex-wrap:nowrap; position:absolute; left:var(--raster1k5); top:30px; } .loggedin .appbar.login-content { display:flex; } .appbar-back { display:inline-block; height:var(--raster3); background-image:url('../img/icons/arrow-left-red.svg'); background-position:left 12px center; background-repeat:no-repeat; padding-left:var(--raster3); padding-right:var(--raster05); line-height:var(--raster3); color:var(--color-gray); border-radius:var(--raster05); padding-right:24px; margin-right:9px; outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; transition:var(--shadow-transition); } .appbar-back:focus, .appbar-back:active, .appbar-back:hover { background-color:var(--color-background-white); outline:none; box-shadow:var(--shadow-clickable-hover); color:var(--color-black); } .appbar-back:active { box-shadow:var(--shadow-clickable-active); } .appbar-title::before { content:''; border-left:1px solid var(--color-border-gray); padding-right:var(--raster1); height:var(--raster3); line-height:var(--raster3); } .appbar-title { line-height:var(--raster3); padding:0 var(--raster05); padding-left:0; margin:0; height:var(--raster3); } } @media (min-width:1280px) { .content-options-wrapper { padding-right:96px; } .content-options-wrapper #nachrichten-optionsmenu { transform:translateX(-4px); } .content-options-label { right:96px; } } /* Line #12 modules/ui.adplaceholder.css */
.adplaceholder,.adplaceholder-body{ background-color:#232848; min-width:auto; height:100vh; overflow:hidden; padding:0; margin:0; } .adplaceholder-body{ flex-direction:column; display:grid; background:url("../img/illustrations/herz.svg"); background-position:top 10px right 5vw; background-size:contain; background-repeat:no-repeat; padding:5vw; align-items:center; text-align:center; } .adplaceholder-text{ margin:0; overflow:hidden; color:white; text-align:left; padding-right:20vw; } /* Line #13 modules/ui.articlelist.css */
 #article-list{ margin-top:var(--raster8); } .articlelist {text-align:left;} .articlelist-hl{ margin:2rem 0 1.5rem; display:flex; justify-content:space-between; } .articlelist-hl-headline{ margin:0; } .articlelist-hl-socialicons{display:flex;align-items:center;} .articlelist-hl-socialicons-label{margin:0;} .articlelist-hl-socialicons-instagram{background:url(../img/icons/socials-instagram.svg);} .articlelist-hl-socialicons-facebook{background:url(../img/icons/socials-facebook.svg);} .articlelist-hl-socialicons-instagram, .articlelist-hl-socialicons-facebook{ background-repeat:no-repeat; height:0; padding-top:24px; overflow:hidden; margin-left:8px; width:24px; } .articlelist-list-list { list-style:none; } .articlelist-list-litem{ margin-left:-8px; margin-right:-8px; } .articlelist-list-litem-link{ display:grid; grid-template-columns:114px 16px auto; grid-auto-rows:32px auto auto 24px; margin-bottom:2px; padding:8px; text-decoration:none; border-radius:16px; } .articlelist-list-litem-link:hover, .articlelist-list-litem-link:active, .articlelist-list-litem-link:focus{ background-color:var(--color-background-white); box-shadow:var(--shadow-clickable-hover); outline:none; } .articlelist-list-litem-link-image{ border-radius:12px; grid-column:1/3; grid-row:1/5; } .articlelist-list-litem-link-headline{ grid-column:3/4; grid-row:2/3; margin:0 0 4px; padding:0; text-align:left; } .articlelist-list-litem-link-subline{ grid-column:3/4; grid-row:3/4; padding:0; margin:0; font-size:1rem; text-align:left; } .articlelist-list-litem-link-ad{ grid-column:3/4; grid-row:1/2; color:var(--color-gray); opacity:0.75; font-size:9px !important; display:flex; padding:0; margin:0; align-items:flex-end; margin-bottom:4px; } .articlelist-showall{ margin:var(--raster) 0; padding:0; } @media (min-width:768px) { .articlelist { margin:auto; width:100%; text-align:left; } } /* Line #14 modules/ui.bfgad.css */
ins.bfgad::before{ content:"Anzeige"; display:block; color:var(--color-gray); opacity:0.75; font-size:9px !important; position:absolute; padding-left:2px; top:0; left:0; transform:translateY(-16px); z-index:200; } ins.bfgad{ display:inline-block; margin:0 auto; position:relative; box-shadow:var(--shadow-clickable-hover); background:var(--color-gray); } .ad-bfg-iframe{ width:100%; height:100%; border:0; float:left; } .ad-bfg-img{ width:100%; height:100%; border:0; float:left; } .ad-bfg-img img{ float:left; } /* Line #15 modules/ui.autocomplete.css */
.js-ac-suggestions { border-top:1px solid var(--color-background-gray); outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; box-shadow:0 16px 10px 0px rgb(35 40 72 / 8%), 1px 3px 3px 0 rgb(35 40 72 / 8%), 0px 12px 12px 0 rgb(35 40 72 / 8%); background:var(--color-background-white); margin-top:-1px; position:absolute; display:none; z-index:1000; max-height:224px; overflow:hidden; overflow-y:auto; box-sizing:border-box; -webkit-overflow-scrolling:touch; border-radius:12px; margin-bottom:24px; padding:12px 0; border-top-left-radius:0; border-top-right-radius:0; } .js-ac-suggestion { position:relative; display:block; padding:0px 34px 0px 72px; line-height:56px !important; height:56px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--color-black); font:16px Helvetica, Arial, sans-serif; font-weight:bold; margin-left:8px; margin-right:8px; margin-bottom:4px; border-radius:var(--raster05); } .js-ac-suggestion mark { font-weight:normal; color:var(--color-gray); } .js-ac-suggestion.selected,.js-ac-suggestion:active { background-color:var(--color-background-gray-darker); } #js-ac-noresult{ position:absolute; top:-13px; left:41px; color:var(--color-white); background:var(--color-action-secondary); border-radius:24px; padding:4px 16px; font-size:12px; font-weight:700; } .js-ac-suggestions::-webkit-scrollbar-thumb { background-color:var(--color-action-secondary); border-radius:4px; } .js-ac-suggestions::-webkit-scrollbar-track { background-color:var(--color-background-gray); border-radius:4px; margin-top:4px; margin-bottom:12px; } .js-ac-suggestions::-webkit-scrollbar-corner { background-color:var(--color-background-gray); border-radius:4px; } .js-ac-suggestions::-webkit-scrollbar { width:8px; height:24px; } .js-ac-suggestions { -ms-overflow-style:auto; scrollbar-color:var(--color-action-secondary) var(--color-background-gray); scrollbar-width:auto; } .js-ac-suggestion{ background-image:url("../img/icons/marker-gray-bg.svg"); background-repeat:no-repeat; background-position-x:8px; background-position-y:center; } .js-ac-suggestion mark{ background:none; } /* Line #16 modules/ui.brandingbackground.css */
.branding-background-beach{ min-height:80vw; background:#fffffd url('../img/background/beach@375_p.webp') center bottom / contain no-repeat; } @media (min-width:414px) { .branding-background-beach{ background-image:url("../img/background/beach@414_p.webp") !important; } } @media (min-width:500px) { .branding-background-beach{ background-image:url("../img/background/beach@768_p.webp") !important; } } @media (min-width:770px) { .branding-background-beach{ background-image:url("../img/background/beach@1440_c.webp") !important; min-height:50vw; } } @media (min-width:1442px) { .branding-background-beach{ background-image:url("../img/background/beach@1920_p.webp") !important; min-height:80vw; } } @media (min-width:1930px) { .branding-background-beach{ background-image:url("../img/background/beach@2560_p.webp") !important; } } @media (min-aspect-ratio:1/1) and (min-width:500px) { .branding-background-beach{ background-image:url("../img/background/beach@768_c.webp") !important; min-height:50vw; } } @media (min-aspect-ratio:1/1) and (min-width:770px) { .branding-background-beach{ background-image:url("../img/background/beach@1440_c.webp") !important; min-height:50vw; } } @media (min-aspect-ratio:1/1) and (min-width:1442px) { .branding-background-beach{ background-image:url("../img/background/beach@1920_c.webp") !important; min-height:50vw; } } @media (min-aspect-ratio:1/1) and (min-width:1930px) { .branding-background-beach{ background-image:url("../img/background/beach@2560_c.webp") !important; min-height:50vw; } } @media (min-aspect-ratio:4/3) and (min-width:500px) { .branding-background-beach{ background-image:url("../img/background/beach@768_l.webp") !important; min-height:41vw; } } @media (min-aspect-ratio:4/3) and (min-width:770px) { .branding-background-beach{ background-image:url("../img/background/beach@1440_l.webp") !important; min-height:41vw; } } @media (min-aspect-ratio:4/3) and (min-width:1442px) { .branding-background-beach{ background-image:url("../img/background/beach@1920_l.webp") !important; min-height:41vw; } } @media (min-aspect-ratio:4/3) and (min-width:1930px) { .branding-background-beach{ background-image:url("../img/background/beach@2560_l.webp") !important; min-height:41vw; } } @media (min-aspect-ratio:16/9) and (min-width:500px) { .branding-background-beach{ background-image:url("../img/background/beach@768_w.webp") !important; min-height:33vw; } } @media (min-aspect-ratio:16/9) and (min-width:770px) { .branding-background-beach{ background-image:url("../img/background/beach@1440_w.webp") !important; min-height:33vw; } } @media (min-aspect-ratio:16/9) and (min-width:1442px) { .branding-background-beach{ background-image:url("../img/background/beach@1920_w.webp") !important; min-height:33vw; } } @media (min-aspect-ratio:16/9) and (min-width:1930px) { .branding-background-beach{ background-image:url("../img/background/beach@2560_w.webp") !important; min-height:33vw; } } /* Line #17 modules/ui.cardslider.css */
.cardslider{ grid-template-rows:auto auto; grid-template-columns:0 auto 0; grid-row-gap:var(--raster05); grid-column-gap:0; padding-bottom:calc(var(--vh, 1vh) * 2.5); } @media (min-width:1024px){ .cardslider{ padding-bottom:calc(var(--vh, 1vh) * 8); } } .cardslider-container{ grid-row:2 / 3; grid-column:2 / 4; padding-bottom:var(--raster1k5); overflow-x:scroll; overflow-y:hidden; -webkit-overflow-scrolling:touch; -ms-overflow-style:-ms-autohiding-scrollbar; } .cardslider-container::-webkit-scrollbar { display:none; } .cardslider-headline{ grid-row:1 / 2; grid-column:2 / 4; } .cardslider-headline-headline{ display:inline-block; } .cardslider-headline-link{ border-left:2px solid var(--color-border-gray); padding-left:var(--raster); margin-left:var(--raster); color:var(--color-gray); text-decoration:none; } .cardslider-slider{ display:flex; padding-right:12px; } .cardslider-slider,.cardslider-headline{ padding-left:var(--raster); } @media (min-width:376px){ .cardslider-slider{ padding-left:var(--raster1k5); } .cardslider-headline{ padding-left:var(--raster1k5); } } @media (min-width:948px){ .cardslider-slider{ padding-left:var(--raster3); } .cardslider-headline{ padding-left:var(--raster3); } } @media (min-width:1280px){ .cardslider-slider{ padding-left:var(--raster7); } .cardslider-headline{ padding-left:var(--raster7); } } @media (min-width:1440px){ .cardslider-slider{ padding-left:var(--raster7); } .cardslider-headline{ padding-left:var(--raster10); } } @media (min-width:1620px){ .cardslider-slider{ padding-left:var(--raster9); } .cardslider-headline{ padding-left:var(--raster13); } } @media (min-width:1920px){ .cardslider-slider{ padding-left:var(--raster10); } .cardslider-headline{ padding-left:288px; } } .cardslider-slider-size-9cards{ width:calc(514.28vw); height:calc((57.14vw - 20px) * 1.5); } @media (min-width:500px) { .cardslider-slider-size-9cards{ width:calc(400vw - 67px); height:calc((44.4vw - 30px) * 1.5); } } @media (min-width:666px) { .cardslider-slider-size-9cards{ width:calc(300vw - 300px); height:calc((33.33vw - 50px) * 1.5); } } @media (min-width:872px) { .cardslider-slider-size-9cards{ width:calc(211.76vw - 32px); height:calc((23.53vw - 24px) * 1.5); } } @media (min-width:1078px) { .cardslider-slider-size-9cards{ width:calc(200vw - 60px); height:calc((22.22vw - 20px) * 1.5); } } @media (min-width:1284px) { .cardslider-slider-size-9cards{ width:calc(163.64vw - 48px); height:calc((18.18vw - 17px) * 1.5); } } .cardslider-c{ flex-grow:1; flex-basis:0; margin-right:var(--raster); display:flex; } .cardslider-c{ background-color:var(--color-gray); background-size:cover; outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; transition:var(--shadow-transition); transition:all ease-in-out .15s; border-radius:4px; box-shadow:var(--shadow-clickable-default); } .cardslider-c:hover{ box-shadow:var(--shadow-clickable-hover); } .cardslider-c:focus, .cardslider-c:active, .cardslider-c:target{ box-shadow:var(--shadow-clickable-active); } .cardslider-c{ position:relative; display:flex; flex-wrap:wrap; align-items:stretch; text-decoration:none; border-radius:4px; outline:none; overflow:hidden; } .cardslider-c-content{ align-self:flex-start; flex-grow:1; border-radius:4px; text-align:center; height:100%; } .cardslider-c-title{ color:white; background-image:url("../img/icons/swoosh-green.svg"); background-repeat:no-repeat; background-position:bottom; background-size:96px 8px; padding:var(--raster) var(--raster05) var(--raster05); text-decoration:none; transform:translateY(0); margin-top:0; margin-bottom:var(--raster2); transition:0.25s ease-in-out transform; text-decoration:none; } @media (min-width:1025px) { .cardslider-c-title{ transform:translateY(16px); } } .cardslider-c:hover .cardslider-c-title, .cardslider-c:target .cardslider-c-title, .cardslider-c:focus .cardslider-c-title, .cardslider-c:active .cardslider-c-title{ transform:translateY(0); } .cardslider-c-text{ display:none; color:white; transform:translateY(140px); opacity:0; transition:0.25s ease-in-out all; line-height:2; padding:var(--raster); } @media (min-width:1025px) { .cardslider-c-text{ display:block; min-height:180px; } } .cardslider-c:hover .cardslider-c-text, .cardslider-c:target .cardslider-c-text, .cardslider-c:focus .cardslider-c-text, .cardslider-c:active .cardslider-c-text{ transform:translateY(0); opacity:1; line-height:inherit; } .cardslider-c-cta{ display:none; color:var(--color-white); transform:translateY(180px); opacity:0; transition:0.25s ease-in-out transform, 0.15s ease-in-out opacity; padding:var(--raster05); } @media (min-width:1025px) { .cardslider-c-cta{ display:block; } } .cardslider-c:hover .cardslider-c-cta, .cardslider-c:target .cardslider-c-cta, .cardslider-c:focus .cardslider-c-cta, .cardslider-c:active .cardslider-c-cta{ transform:translateY(-24px); opacity:1; transition-delay:.025s, .025s; } .cardslider-nav-prev,.cardslider-nav-next{ display:none; background-image:url("../img/icons/chevron-right-red.svg"); background-position:44% 50%; background-color:var(--color-background-white); opacity:0.85; } .cardslider-nav-prev:hover,.cardslider-nav-prev:focus,.cardslider-nav-next:hover,.cardslider-nav-next:focus{ opacity:1; } @media (min-width:1025px) { .cardslider-nav-visible .cardslider-nav-prev{ display:flex; align-self:center; grid-row:2 / 3; grid-column:1 / 2; margin-left:var(--raster1k5); transform:scaleX(-1) translateY(-50%); } } @media (min-width:1440px){ .cardslider-nav-visible .cardslider-nav-prev{ margin-left:var(--raster2); } } @media (min-width:1920px){ .cardslider-nav-visible .cardslider-nav-prev{ margin-left:var(--raster3); } } @media (min-width:1025px) { .cardslider-nav-next{ display:flex; align-self:center; grid-row:2 / 3; grid-column:3 / 4; margin-left:-64px; z-index:90; } } @media (min-width:1440px){ .cardslider-nav-next{ margin-left:-80px; } } @media (min-width:1920px){ .cardslider-nav-next{ margin-left:-96px; } } .cardslider-c-img{ width:auto; height:102%; position:absolute; left:0; top:0; border-radius:4px; } .cardslider-c:hover .cardslider-c-content:before, .cardslider-c:focus .cardslider-c-content:before, .cardslider-c:active .cardslider-c-content:before{ background:linear-gradient(180deg, #2328482b 0%, #23284826 15%, #2328487a 100%, #232848 100%); } .cardslider-c-content:before{ background:linear-gradient(180deg, rgba(35,40,72,0.05) 0%, rgba(35,40,72,0.15) 15%, rgba(0, 0, 0, 0.05) 50%, rgba(35,40,72,0) 100%); content:""; top:0; left:0; width:100%; height:100%; display:block; position:absolute; } /* Line #18 modules/ui.cookieconsent.css */
.cookie-consent { opacity:0; background:linear-gradient( 0deg, #23284894, #23284847, transparent, transparent ); position:fixed; width:100vw; height:100vh; top:0; left:0; justify-content:center; align-items:flex-end; overflow:auto; z-index:9999; display:flex; overflow-x:hidden; overflow-y:scroll; animation-delay:1.5s; animation-duration:0.5s; animation-name:cookieConsentFadeIn; animation-fill-mode:forwards; animation-timing-function:ease-out; } .cookie-consent-detailwindow { align-items:flex-start; animation:none; opacity:1; background:linear-gradient( 0deg, #23284894, #23284885, #23284878, #23284847 ); } @keyframes cookieConsentFadeIn { from { opacity:0; } to { opacity:1; } } .cookie-consent-modal { background:var(--color-background-white); margin:5vw; border-radius:12px; max-width:450px; text-align:center; width:95vw; animation-delay:1.5s; animation-duration:0.5s; animation-name:cookieConsentFlyIn; animation-fill-mode:forwards; animation-timing-function:ease-out; box-shadow:0 24px 14px -18px rgb(35 40 72 / 16%), 0 17px 33px 0 #1a1f3770; } .cookie-consent-detailwindow .cookie-consent-modal { animation:none; } @keyframes cookieConsentFlyIn { from { transform:translateY(5%); } to { opacity:translateY(0); } } @media (min-width:768px) { .cookie-consent-modal { margin-bottom:8vh; padding:1.5vw; } } @media (min-width:768px) and (max-height:600px) { .cookie-consent-modal { margin-bottom:2vh; } } .cookie-consent-analytics, .cookie-consent-ads { font-size:1.2rem; font-weight:700; margin-top:var(--raster3); padding-left:var(--raster1k5); padding-right:var(--raster1k5); } .cookie-consent-detail-wrapper { background:var(--color-background-gray); padding:var(--raster1k5) var(--raster); border-radius:5px; margin:var(--raster05) var(--raster1k5); } .cookie-consent-partner-privacylink:after { background-image:url('../img/icons/external-link.svg'); content:''; margin-left:4px; width:18px; height:18px; display:inline-block; } .cookie-consent-partner-wrapper { background:var(--color-background-gray); padding:var(--raster); border-radius:5px; margin:var(--raster05) var(--raster1k5); } .cookie-consent-detail-details { font-size:0.85rem; } .cookie-consent-partner-partner, .cookie-consent-detail-title { font-weight:700; font-size:0.85rem; color:var(--color-black); } @media (min-width:768px) { .cookie-consent-detail-title { font-size:0.9rem; } } .cookie-consent-resign-info, .cookie-consent-decline-info, .cookie-consent-terms, .cookie-consent-imprint, .cookie-consent-privacy { font-size:0.8rem; } .cookie-consent-decline-info { margin-bottom:var(--raster2); } .cookie-consent-resign-info { margin-top:var(--raster2); } .cookie-consent-back { padding:var(--raster); display:block; } .cookie-consent-headline { padding-left:var(--raster1k5); padding-right:var(--raster1k5); } @media (min-width:768px) { .cookie-consent-headline { font-size:1rem; padding:8px; } } .cookie-consent-details-text { font-size:0.75rem; } @media (min-width:768px) { .cookie-consent-details-text { font-size:1rem; } } .cookie-consent-details-headline, .cookie-consent-tcf-partner-headline, .cookie-consent-all-partner-headline { font-size:1rem; font-weight:700; margin-top:var(--raster2); padding-left:var(--raster1k5); padding-right:var(--raster1k5); } @media (min-width:768px) { .cookie-consent-details-headline, .cookie-consent-tcf-partner-headline, .cookie-consent-all-partner-headline { font-size:1.25rem; } } .cookie-consent-more-description, .cookie-consent-tcf-partner-text, .cookie-consent-all-partner-text, .cookie-consent-details-text { font-size:0.9rem; margin-bottom:var(--raster2); padding-left:var(--raster1k5); padding-right:var(--raster1k5); } .cookie-consent-analytics-text, .cookie-consent-ads-text, .cookie-consent-privacy, .cookie-consent-whattodo, .cookie-consent-morinfo, .cookie-consent-partner-wrapper, .cookie-consent-detail-description, .cookie-consent-partner-partner, .cookie-consent-partner-cookieinfo, .cookie-consent-partner-privacylink { font-size:0.85rem; padding-left:var(--raster1k5); padding-right:var(--raster1k5); } .cookie-consent-partner-wrapper { position:relative; overflow:hidden; text-align:left; } .cookie-consent-partner-partner { padding:0; max-width:calc(100% - 110px); } .cookie-consent-partner-cookieinfo { float:left; text-align:left; padding:0; margin:0; } .cookie-consent-partner-privacylink { position:absolute; margin-left:6px; padding:0; right:8px; top:8px; } .cookie-consent-subscribe, .cookie-consent-enable { display:inline-block; white-space:normal; min-width:calc(100% - 48px); margin-bottom:var(--raster05); } .cookie-consent-details { display:inline; } .cookie-consent-description { padding-left:var(--raster1k5); padding-right:var(--raster1k5); margin-bottom:var(--raster2); } .cookie-consent-enable { } .cookie-consent-footer { display:flex; margin-top:0; align-items:flex-start; justify-content:center; flex-direction:row; flex-flow:wrap; margin-bottom:0; clear:both; border-top:1px solid var(--color-background-gray); } .cookie-consent-privacy, .cookie-consent-imprint { margin:var(--raster); display:block; } .cookie-consent-back-bottom { margin-top:var(--raster3); display:block; margin-bottom:var(--raster3); } /* Line #19 modules/ui.dialog.css */
.dialog{ top:0; left:0; width:100%; height:100%; z-index:2000; position:fixed; background:var(--color-background-sky); padding:var(--raster3) var(--raster1k5); overflow:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; } @media (min-width:376px){ .dialog{ padding:var(--raster7) var(--raster1k5); } } @media (min-width:500px){ .dialog{ padding:var(--raster10) var(--raster2); } } @media (min-width:768px){ .dialog{ padding:15vw; } } @media (min-width:1366px){ .dialog{ padding:5vw 25vw; } } @media (min-aspect-ratio:1/1){ .dialog{ padding-top:12.5vw; } } @media (min-aspect-ratio:4/3){ .dialog{ padding-top:10vw; grid-template-rows:10vw auto 1fr; } } .dialog-close{ position:fixed; background-image:url("../img/icons/big-close-red.svg"); background-color:var(--color-background-sky); top:var(--raster1k5); right:var(--raster1k5); } @media (min-width:500px){ .dialog-close{ top:var(--raster2); right:var(--raster2); } } .dialog-close:hover,.dialog-close:active,.dialog-close:target,.dialog-close:focus{ background-color:var(--color-background-white); } .dialog-closed{ display:none; } .dialog:target{ display:block; } .dialog-title{ } .dialog-radiolist:hover li,.dialog-linklist:hover li{ border-bottom-color:transparent; transition:border ease-in-out 0.25s; } .dialog-radiolist,.dialog-linklist{ list-style-type:none; white-space:nowrap; margin-bottom:var(--raster3); scroll-behavior:smooth; } .dialog-radiolist li,.dialog-linklist li{ border-bottom:1px solid var(--color-background-gray); } .dialog-radiolist li:last-child,.dialog-linklist li:last-child{ border:none; } .dialog-radiolist-item,.dialog-linklist-item{ display:block; text-decoration:none; color:var(--color-black); background-repeat:no-repeat; padding-left:var(--raster3); line-height:62px; background-position:left var(--raster) center; border-radius:8px; outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; transition:var(--shadow-transition); } .dialog-radiolist-item{ background-image:url("../img/icons/radio-gray.svg"); } .dialog-linklist-item{ background-image:url("../img/icons/chevron-right-gray.svg"); } .dialog-radiolist-item:hover,.dialog-radiolist-item:focus,.dialog-radiolist-item:target, .dialog-linklist-item:hover,.dialog-linklist-item:focus,.dialog-linklist-item:target{ background-color:var(--color-background-white); box-shadow:var(--shadow-clickable-hover); color:var(--color-gray); } .dialog-radiolist-item-selected , .dialog-radiolist-item:active, .dialog-radiolist-item:focus{ background-image:url("../img/icons/radio-green.svg"); } .dialog-linklist-item-selected , .dialog-linklist-item:active{ background-image:url("../img/icons/chevron-right-red.svg"); } .dialog-button{ margin-right:var(--raster05); } /* Line #20 modules/ui.footernav.css */
.footernav{ min-height:43px; display:flex; justify-content:center; width:100%; background:rgba(0, 0, 0, 0.2); } .defaultfooter.light .footernav{ background:transparent; } .defaultfooter.light .footernav .button-link:hover, .defaultfooter.light .footernav .button-link:focus, .defaultfooter.light .footernav .button-link:active { background-color:var(--color-white); color:var(--color-black); } .defaultfooter.light .footernav-list-item .a-small{ color:var(--color-gray); } .defaultfooter{ margin-top:-43px; } @media (max-width:768px) { .loggedin .defaultfooter{ margin-top:-43px; padding-bottom:64px; } } @media (width:375px) or (width:390px) or (width:414px) { .loggedin .defaultfooter{ margin-top:-43px; padding-bottom:80px; } } .footernav-list{ display:flex; justify-content:space-evenly; flex-flow:wrap; width:100%; } @media (max-width:768px) { .footernav-list li:nth-child(n+3) { display:none; } } @media (max-width:1024px) { .footernav-list li:nth-child(n+4) { display:none; } } @media (max-width:1440px) { .footernav-list li:nth-child(n+5) { display:none; } } @media (max-width:1620px) { .footernav-list li:nth-child(n+6) { display:none; } } .footernav-list li.footernav-list-item-more{ display:block; } #footernav-more:target.footernav-list{ display:block; } .footernav-list-item{ list-style:none; padding:var(--raster05) 0; } .footernav-list-item .button-link{ color:#fffffdeb; padding-left:16px; padding-right:16px; } .footernav-list-item-more .button-link{ background-image:url("../img/icons/menu-small-white.svg"); background-position:left 8px top 3px; background-repeat:no-repeat; padding-left:28px; } .defaultfooter.light .footernav-list-item-more .button-link{ background-image:url("../img/icons/menu-small-gray.svg"); } /* Line #21 modules/ui.loadingbar.css */
.loadingbar{ opacity:1; width:100vw; height:5px; background-color:transparent; display:block; position:fixed; top:0; width:100vw; overflow:hidden; transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; z-index:851; } .loadingbar.loading{ background:#eaebf5; } .loading-error .loadingbar.loading{ background:var(--color-action-primary); } .loadingbar::after{ display:block; content:""; height:5px; background:transparent; transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; } .loadingbar.loading::after{ background:linear-gradient(45deg, transparent, #007b89, transparent); animation:animation-loading-bar 1.5s linear infinite; } .loading-error .loadingbar.loading::after{ display:none; } /* Line #22 modules/ui.navbar.css */
.loggedin .mainnav{ display:block; } .loginnav{ display:inline-block; opacity:0; position:absolute; top:var(--raster); right:var(--raster); animation:fade-in-from-bottom 0.5s ease-in-out 0.5s 1 forwards; z-index:400; } @media (max-width:411px) and (max-height:450px) { .loginnav{ display:none !important; } } @media (min-width:737px) { .loginnav{ bottom:initial !important; top:var(--raster1k5); left:initial !important; right:var(--raster1k5); border-color:var(--color-action-primary) !important; color:var(--color-action-primary) !important; } } .loggedin .loginnav{ display:none; } .mainnav{ z-index:800; display:none; } @media (max-width:768px) { .mainnav{ position:fixed; bottom:0; left:0; width:100vw; background:white; outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; box-shadow:var(--shadow-paper-level1); } .mainnav .font-nav{ display:inline-block; padding-top:35px; height:var(--raster4); color:var(--color-black); outline:none; } .mainnav .font-nav:hover, .mainnav .font-nav:focus, .mainnav .font-nav:active{ border-top-color:var(--color-border-gray); } .mainnav .font-nav:active{ background-color:var(--color-background-gray); border-top-color:var(--color-border-gray); } } @media (width:375px) or (width:390px) or (width:414px) { .mainnav .font-nav{ height:var(--raster5); } } @media (width:360px) and (height:812px),(width:414px) and (height:896px){ .mainnav .font-nav{ padding-bottom:36px; } } @media (min-width:769px) { .mainnav{ position:absolute; top:42px; right:var(--raster1k5); width:38vw; max-width:400px; } .mainnav .font-nav{ color:var(--color-gray); padding:6px 4px; outline:none; } .mainnav .mainnav-list-darkmode .font-nav{ color:var(--color-white); } .mainnav .main-list-item-active{ opacity:1; color:var(--color-black); } .mainnav .font-nav:hover::after{ background-color:var(--color-border-gray); transform:scaleX(0.5); } .mainnav .main-list-item-active.font-nav::after, .mainnav .font-nav:active::after, .mainnav .font-nav:focus::after{ background-color:var(--color-action-primary); transform:scaleX(1); } .mainnav .font-nav::after{ content:""; background-color:transparent; transform:scaleX(0.5); height:3px; display:block; margin:4px; transition:all 0.35s cubic-bezier(0.55, 0.055, 0.675, 0.19); } } @media (min-width:1024px) { .mainnav{ right:var(--raster4); } } .mainnav-list{ display:flex; justify-content:space-around; flex-flow:wrap; } .mainnav-list-item{ list-style:none; display:inline-block; } @media (max-width:768px) { .mainnav-list-item-search, .mainnav-list-item-chat, .mainnav-list-item-profile{ width:calc(33.3333333vw - 16px ); text-align:center; background:no-repeat center 8px; border-top:3px solid transparent; opacity:0.65; } .mainnav-list-item-search{ background-image:url("../img/icons/nav-search-black.svg"); } .mainnav-list-item-chat{ background-image:url("../img/icons/nav-chat-black.svg"); } .mainnav-list-item-profile{ background-image:url("../img/icons/nav-account-black.svg"); } .main-list-item-active{ border-top-color:var(--color-action-primary); opacity:1; } } /* Line #23 modules/ui.profilelist.css */
 .pl-ad.bfgad-wrapper { margin-top:var(--raster1k5); margin-right:-16px; margin-bottom:var(--raster1k5); margin-left:-16px; padding-top:var(--raster1k5); padding-bottom:var(--raster1); text-align:center; background-image:url('../img/illustrations/connect-green.svg'); background-size:contain; background-repeat:no-repeat; background-position:right; display:grid; grid-template-columns:auto; grid-template-rows:275px; } @media (min-width:415px) { .pl-ad.bfgad-wrapper { margin-right:-32px; margin-left:-32px; } } .pl-ad.bfgad-wrapper.pl-ad-bigger { grid-template-rows:728px; } @media (min-width:620px) { .pl-ad.bfgad-wrapper { margin-right:auto; margin-left:auto; } .pl-ad.bfgad-wrapper, .pl-ad.bfgad-wrapper.pl-ad-bigger { background-size:contain; background-position:center; } } @media (min-width:1300px) { .pl-ad.bfgad-wrapper, .pl-ad.bfgad-wrapper.pl-ad-bigger { grid-template-rows:auto; background-image:none; } } .pl-ad.bfgad-wrapper.bfgad-wrapper ins.bfgad { width:300px; height:250px; position:sticky; top:var(--raster6); } .pl-ad.pl-ad-bigger.bfgad-wrapper.bfgad-wrapper ins.bfgad { width:300px; height:600px; } @media (min-width:1300px) { .pl-ad.bfgad-wrapper.bfgad-wrapper ins.bfgad, .pl-ad.pl-ad-bigger.bfgad-wrapper.bfgad-wrapper ins.bfgad { width:728px; height:90px; } } @media (min-width:1750px) { .pl-ad.pl-ad-bigger.bfgad-wrapper.bfgad-wrapper ins.bfgad { width:970px; height:250px; } } .bfgad-sidebar.bfgad-wrapper { height:100%; text-align:center; } @media (max-width:579px) { .bfgad-sidebar.bfgad-wrapper { background-image:url('../img/illustrations/connect-gray.svg'); background-size:cover; background-repeat:no-repeat; background-position:right bottom; padding:var(--raster); margin-left:-16px; margin-right:-16px; display:grid; grid-template-columns:auto; grid-template-rows:800px; } } @media (min-width:415px) and (max-width:619px) { .bfgad-sidebar.bfgad-wrapper { margin-right:-32px; margin-left:-32px; } } .bfgad-sidebar.bfgad-wrapper ins.bfgad { width:300px; height:600px; position:sticky; top:var(--raster6); } @media (min-width:620px) { .bfgad-sidebar.bfgad-wrapper ins.bfgad { margin-bottom:var(--raster1k5); } } @media (min-width:620px) and (max-height:680px) { .bfgad-sidebar.bfgad-wrapper ins.bfgad { top:var(--raster2); } } @media (min-width:768px) { .bfgad-sidebar.bfgad-wrapper ins.bfgad { margin-bottom:var(--raster1k5); } } @media (min-width:620px) and (max-width:947px) { .bfgad-sidebar.bfgad-wrapper ins.bfgad { width:100%; } } .pl-container { list-style:none; } .pl-i { align-items:center; align-content:stretch; margin-left:-8px; margin-right:-8px; outline:none; -webkit-tap-highlight-color:var(--color-highlight); -webkit-appearance:none; transition:var(--shadow-transition); overflow:visible; position:relative; border-radius:8px; margin-top:-1px; } .pl-i-ad { margin-top:var(--raster1); margin-right:-24px; margin-bottom:var(--raster1); margin-left:-24px; padding-top:var(--raster1k5); padding-bottom:var(--raster1); text-align:center; background-image:url('../img/illustrations/connect-green.svg'); background-size:cover; background-repeat:no-repeat; background-position:right; display:grid; grid-template-columns:auto; grid-template-rows:330px; } .pl-container ins.bfgad { position:sticky; top:var(--raster); display:inline-block; margin:0 auto; box-shadow:var(--shadow-clickable-hover); background:var(--color-gray); width:300px; height:250px; } .pl-container ins.bfgad::before { content:'Anzeige'; display:block; color:var(--color-gray); opacity:0.75; font-size:9px !important; position:absolute; padding-left:2px; top:0; left:0; transform:translateY(-16px); z-index:200; } @media (min-width:360px) { .pl-i-ad { background-size:contain; background-position:center; } } @media (min-width:1024px) { .pl-i-ad { margin-right:-240px; margin-left:-240px; background:none; grid-template-rows:auto; padding:0px; margin-bottom:0px; } .pl-i-ad:after { content:''; margin-top:var(--raster3); border-bottom:1px solid var(--color-background-gray); display:block; transition:border ease-in-out 0.5s; margin-left:240px; margin-right:240px; } .pl-container ins.bfgad { width:970px; height:250px; margin-top:0; position:relative; } } .pl-i>.pl-i-profile { display:none; } .pl-i-link { border-radius:8px; overflow:hidden; } .pl-i-badge { background:var(--color-action-primary); position:absolute; min-width:var(--raster1k5); height:var(--raster1k5); line-height:var(--raster1k5); color:var(--color-background-white); text-align:center; border-radius:16px; left:56px; top:16px; padding:0 5px; box-shadow:var(--shadow-clickable-default); } .pl-i:last-child .pl-i-link:after { border:none; } .pl-i--open>.pl-i-profile { display:block; } .pl-i-link:after { content:''; border-bottom:1px solid var(--color-background-gray); grid-column:2 / 6; grid-row:4 / 5; display:block; transition:border ease-in-out 0.5s; } .pl-i--open .pl-i-link:after { border-bottom-color:var(--color-background-white); height:2px; } .pl-i-loadingbar { grid-column:1 / 7; grid-row:1 / 5; width:100%; position:relative; opacity:0; border-radius:8px; display:none; transition:opacity 0.25s ease-in-out; } .pl-i.loading .pl-i-loadingbar { opacity:1; display:block; } .pl-i.loading-error .pl-i-loadingbar { opacity:1; display:block; } .pl-i.loading-error::after { content:'Profildetails nicht abrufbar. Prüf deine Verbindung.'; display:block; font-size:11px !important; background-color:rgba(255, 255, 255, 0.5); position:absolute; padding:4px 16px; color:var(--color-action-primary); top:0; right:0; } .pl-i-link:hover, .pl-i:target .pl-i-link, .pl-i.loading .pl-i-link, .pl-i.loading-error .pl-i-link { background-color:var(--color-background-white); box-shadow:var(--shadow-clickable-hover); outline:none; } .pl-i-link:active, .pl-i-link:target, .pl-i-link:focus { background-color:var(--color-background-white); box-shadow:var(--shadow-clickable-active); outline:none; } .pl-i:active .pl-i-link:after, .pl-i:focus .pl-i-link:after, .pl-i:hover .pl-i-link:after, .pl-i--open .pl-i-link:after, .pl-i.loading .pl-i-link:after, .pl-i.loading-error .pl-i-link:after { display:none; } .pl-i-link:focus:after { display:none; } .pl-i-link:target:after { display:none; } .pl-i--open .pl-i-link { box-shadow:none; background:none; } .pl-i--open, .pl-i.loading-error { margin-top:var(--raster05); margin-bottom:var(--raster05); transition:margin 0.75s ease-in-out; } li.pl-i:first-child { margin-top:0 !important; } .pl-i--open { border-radius:var(--raster05); background-color:var(--color-background-white); box-shadow:var(--shadow-clickable-hover); } .pl-i-link { display:grid; text-decoration:none; grid-template-columns:0 var(--raster4) 0 auto auto 0; grid-template-rows:var(--raster) auto auto 16px; grid-gap:var(--raster05); } @media (min-width:376px) { .pl-i-link { grid-template-columns:var(--raster05) var(--raster4) 0 auto auto var(--raster05); } } .pl-i-img { grid-column:2 / 3; grid-row:1 / 5; width:100%; display:flex; align-self:center; justify-self:center; } .pl-i-img-placeholder { grid-column:2 / 3; grid-row:1 / 5; width:100%; display:flex; align-self:center; justify-self:center; background-image:url('../img/icons/you-and-me.svg'); background-size:64px 64px; height:64px; width:64px; } .pl-i-text { grid-column:4 / 6; grid-row:2 / 3; margin:0; color:var(--color-black); padding:0; transition:transform 0.2s ease; } .pl-i-desc { grid-column:4 / 6; grid-row:3 / 4; color:#3f4664; margin:0; padding:0; } .pl-container-distance .pl-i-text { grid-column:4 / 5; } .pl-i-distance { grid-column:5 / 6; grid-row:2 / 3; color:var(--color-gray); margin:0; padding:0; text-align:right; margin-right:var(--raster05); } .pl-i-profile { margin-top:var(--raster); } .pl-i-profile .pr-subject { display:none; } .pr-subject { color:var(--color-black); } .pl-i-desc.pl-i-loading, .pl-i-text.pl-i-loading { background:var(--color-background-gray); height:var(--raster1k5); width:var(--raster10); cursor:progress; background:linear-gradient(0.25turn, var(--color-background-gray), #b9e5e9, var(--color-background-gray)), linear-gradient(var(--color-background-gray), var(--color-background-gray)); background-repeat:no-repeat; background-size:180px 24px, 1000px 24px; animation:loading 1.5s infinite; background-position:-160px, -500px; animation-delay:0.1s; border-radius:4px; } .pl-i-text.pl-i-loading { width:var(--raster13); animation-delay:0s; } .pl-i-supporter { box-shadow:0px 0px 0px 2px var(--color-action-secondary); margin-top:var(--raster05); margin-bottom:var(--raster05); } .pl-i-supporter .pl-i-link { transition:background-color 0.25s ease-in-out; background:url('../img/illustrations/supporter-badge-bottom-right.svg') #f5fcfc; background-repeat:no-repeat; background-position:bottom right; min-height:110px; } .pl-i-supporter.pl-i--open { box-shadow:0px 0px 0px 2px var(--color-action-secondary), 0px 0px 3px 2px var(--color-action-secondary), var(--shadow-clickable-hover); } .pl-i-supporter.pl-i--open .pl-i-link { background:white; } .pl-i-supporter .pl-i-link:hover { background-color:white; } .pl-i-supporter .pl-i-link::after { border:none; } .pl-i-supporter .pl-i-desc { padding-right:96px; } @keyframes loading { to { background-position:160px, -500px; } } .pr.grid-sidebar-right { margin:12vw 0; } .pr.grid-sidebar-right .pr-header { grid-column:2 / 3; grid-row:1 / 2; } .pr.grid-sidebar-right .pr-content { grid-column:2 / 3; grid-row:2 / 3; } @media (min-width:620px) { .pr.grid-sidebar-right .bfgad-sidebar { grid-row:1 / 3; } } .pr-header { text-align:center; } .pr-header .pr-img { width:var(--raster10); height:var(--raster10); background:#eeeefb; background-size:cover; background-repeat:no-repeat; border-radius:50%; margin:var(--raster) auto var(--raster) auto; } .pr-header .pr-meta { margin-bottom:0.26em; } .pr-header .pr-onlinestatus { margin-bottom:6vw; } .pr-content { display:grid; grid-template-columns:var(--raster) var(--raster3) auto var(--raster2) 128px var(--raster3) var(--raster); grid-template-rows:auto var(--raster2) 0px var(--raster2) auto var(--raster2) auto var(--raster2) auto var(--raster2); } body.cookies-allowed .pr-content { grid-template-rows:auto var(--raster2) 340px var(--raster2) auto var(--raster2) 290px var(--raster2) auto var(--raster2) auto var(--raster2); } @media (min-width:768px) { .pr-content { grid-template-columns:var(--raster2) var(--raster3) auto var(--raster2) 130px var(--raster3) var(--raster2); } } .pr-text { grid-row:1 / 2; grid-column:2 / 7; } @media (min-width:768px) { .pr-text { grid-column:3 / 6; } } .pr-text p:last-child { margin-bottom:0; } .pr-content-ad.ad-instream.bfgad-wrapper, .pr-content-ad.ad-instream-second.bfgad-wrapper { height:100%; margin-bottom:var(--raster); text-align:center; padding:24px 0 16px 0; background-image:url('../img/illustrations/connect-green.svg'); background-size:contain; background-repeat:no-repeat; background-position:center; grid-row:3 / 4; grid-column:1 / 8; } .pr-content-ad.ad-instream-second.bfgad-wrapper { grid-row:7 / 8; background:none; } .js-users-list .pr-content-ad.ad-instream.bfgad-wrapper, .js-users-list .pr-content-ad.ad-instream-second.bfgad-wrapper { background-size:contain; } @media (min-width:520px) { .js-users-list .pr-content-ad.ad-instream.bfgad-wrapper, .js-users-list .pr-content-ad.ad-instream-second.bfgad-wrapper { background-size:contain; } } .pr-content-ad.ad-instream.bfgad-wrapper.pr-content-ad-alternate-img, .pr-content-ad.ad-instream-second.bfgad-wrapper.pr-content-ad-alternate-img { background-image:url('../img/illustrations/connect-gray.svg'); } .pr-content-ad.ad-instream.bfgad-wrapper ins.bfgad, .pr-content-ad.ad-instream-second.bfgad-wrapper ins.bfgad { width:300px; height:250px; position:sticky; top:96px; } @media (min-width:1600px) { .pr-content-ad.ad-instream.bfgad-wrapper, .pr-content-ad.ad-instream-second.bfgad-wrapper { grid-column:3 / 7; background-size:contain; } } @media (min-width:1920px) { .pr-content-ad.ad-instream.bfgad-wrapper, .pr-content-ad.ad-instream-second.bfgad-wrapper { grid-column:3 / 6; } } .pr-content-ad.ad-content.bfgad-wrapper { grid-row:7 / 8; grid-column:1 / 8; width:100%; margin:0 auto; height:100px; text-align:center; padding:16px 0 0 0; } @media (min-width:375px) { .pr-content-ad.ad-content.bfgad-wrapper { grid-column:2 / 7; } } .pr-content-ad.ad-content.bfgad-wrapper ins.bfgad { width:300px; height:100px; } @media (min-width:500px) { .pr-content-ad.ad-content.bfgad-wrapper { width:auto; margin:0; } .pr-content-ad.ad-content.bfgad-wrapper ins.bfgad { width:100%; height:128px; } } @media (min-width:768px) { .pr-content-ad.ad-content.bfgad-wrapper { grid-column:3 / 6; } } .pr-likes { grid-row:5 / 6; grid-column:2 / 7; } @media (min-width:768px) { .pr-likes { grid-column:3 / 6; } } .pr-likes dt:first-child { margin-top:0; } .pr-footer { grid-row:9 / 10; grid-column:2 / 7; text-align:center; } @media (min-width:768px) { .pr-footer { grid-column:3 / 6; padding-bottom:var(--raster3); } } .pr-footer-messagelink { display:inline-block; margin:var(--raster2) auto var(--raster); } .pr-footer-profilelink { display:none; } .pr-footer .pr-onlinestatus { margin:var(--raster2) auto 0; font-size:11px; color:var(--color-gray); display:none; } .js-users-list .pr-footer-profilelink, .js-users-list .pr-footer .pr-onlinestatus { display:block; } .pr-report-link { display:block; } .js-users-list .pr-report-link { display:none; } .pr-supporter-text { background:#CEF4F8; color:var(--color-gray); display:inline-block; padding:6px var(--raster); border-radius:var(--raster05); margin-bottom:var(--raster3); font-size:13px; font-weight:700; text-decoration:none; } .pr-supporter-text:hover { color:white; background:var(--color-action-secondary); } /* Line #24 modules/ui.zipcodesearchform.css */
@media (min-width:768px) { .zipcode-search { width:calc(100% + 32px); transform:translateX(-16px); } } .zipcode-search input { width:100%; transform:none; } .zipcode-search-icon { position:absolute; height:58px; width:58px; display:flex; align-items:center; top:0; z-index:50; transition:opacity .2s; justify-content:center; } .zipcode-search-icon:hover, .zipcode-search-icon:target, .zipcode-search-icon:focus, .zipcode-search-icon:active { border-radius:50%; outline:none; } .zipcode-search-icon-back { left:0; background-position:25% center !important; } .zipcode-search-icon-delete { right:0; } .zipcode-search-icon-filter { right:0; } .zipcode-search-empty .zipcode-search-icon-delete, .zipcode-search-empty .zipcode-search-icon-filter { opacity:0; } .zipcode-search-icon-search { right:0; } .zipcode-search.loading .zipcode-search-icon-search { display:none; } .zipcode-search-loading { opacity:0; transition:opacity .75s; } .zipcode-search.loading .zipcode-search-loading { opacity:1; height:3px; background-color:var(--color-action-secondary); display:block; position:absolute; bottom:0; width:100%; overflow:hidden; } .zipcode-search.loading .zipcode-search-loading:after { display:block; content:""; height:3px; background:var(--color-action-secondary-darker); animation:animation-loading-bar 1.75s linear infinite; } .zipcode-search::before { opacity:0; transition:opacity .75s; } .zipcode-search.loading::before { opacity:1; animation:animation-spinner .6s linear infinite; transition:opacity 0.2s ease-in-out; content:""; position:absolute; right:15px; top:15px; box-sizing:border-box; width:28px; height:28px; border-radius:50%; border:1px var(--color-action-primary) solid; border-top-color:var(--color-brand); border-right-color:var(--color-action-secondary); border-bottom-color:var(--color-brand); z-index:50; } /* Line #26 components/main_home.css */
#suche-freundinnen { background-image:url("../img/icons/swoosh-green.svg"); background-repeat:no-repeat; background-position:bottom; background-size:contain; padding:0 3px 6px 3px; } #pre-footer { justify-content:space-between; display:flex; flex-direction:column; margin-top:var(--raster4); } #feedback-cta { justify-content:space-between; display:flex; flex-direction:column; } #pre-footer .login-content { display:none; } .loggedin #pre-footer .login-content { display:block; } .loggedin #pre-footer .logout-content { display:none; } #finde-freundinnen .button { margin-bottom:1.3em; } .zipcode-search .ac:hover { border-bottom-color:var(--color-border-gray); box-shadow:var(--shadow-clickable-hover); } .zipcode-search .ac:focus, .zipcode-search .ac:active { border-bottom:3px solid var(--color-brand); box-shadow:var(--shadow-clickable-active); padding:21px 58px 15px 24px; } #suche-freundin .input-text:focus { box-shadow:var(--shadow-clickable-hover); position:absolute; border-radius:16px; transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; border-bottom-color:var(--color-action-secondary); } #suche-freundin.autocomplete-visible .input-text { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:var(--color-white); } .button-go-top { margin:var(--raster1k5) 0; } @keyframes cardslider-fadein { from { opacity:0; } to { opacity:1; } } .pl.grid-sidebar-right .pl-headline { grid-column:2 / 3; grid-row:1 / 2; } @media (min-width:500px) { .pl.grid-sidebar-right .pl-headline { grid-column:2 / 3; } } .pl.grid-sidebar-right .pl-container { grid-column:2 / 3; grid-row:2 / 3; } /* Line #27 components/main_search.css */
#search-results .pl-headline { margin-top:196px; padding:12px; } .loggedin #search-results .pl-headline { margin-top:144px; padding:12px; } #freundinnen-im-umkreis #ac-suche-freundin .ac { padding-left:58px !important; } #freundinnen-suche-filter { animation:fade-in-from-bottom 0.5s ease-in-out 0s 1 forwards; border-radius:var(--raster); padding:4px 4px 0 4px; border-top-right-radius:0; border-top-left-radius:0; border-top:1px solid transparent; } .freundinnen-suche-filter { padding-right:30px; background-image:url('../img/icons/doublearrow-gray.svg'); background-position:0 0; background-size:18px; background-repeat:no-repeat; background-position:right 8px center; margin-bottom:4px; color:var(--color-black); } @media (max-width:414px) { #freundinnen-suche-filter { text-align:center; } } .freundinnen-suche-filter:hover { background-color:var(--color-background-gray); color:var(--color-black); } #freundinnen-suche-filter { padding-top:var(--raster); width:calc(100vw - 32px); max-width:400px; opacity:1; } @media (min-width:376px) { #freundinnen-im-umkreis #freundinnen-suche-filter { width:calc(100vw - 48px); } } #freundinnen-im-umkreis.scroll #freundinnen-suche-filter { padding-top:4px; width:calc(100vw - 16px); } #freundinnen-im-umkreis-observer { height:58px; position:absolute; top:0; left:0; width:1px; } #freundinnen-im-umkreis { z-index:100; } @media (max-width:768px) { #freundinnen-im-umkreis.scroll::before { content:''; display:block; background:linear-gradient(180deg,var(--color-background-sky),transparent); width:100vw; height:72px; position:fixed; top:0; left:0; z-index:0; } } #freundinnen-im-umkreis.scroll { position:fixed; padding:8px 8px 8px 8px; } #freundinnen-im-umkreis.scroll .zipcode-search { width:calc(100vw - 16px); } @media (min-width:620px) { #freundinnen-im-umkreis.scroll #freundinnen-suche-filter, #freundinnen-im-umkreis.scroll .zipcode-search { max-width:290px; } } #freundinnen-im-umkreis.scroll #freundinnen-suche-filter { background-color:var(--color-white); margin-top:0px; box-shadow:0 16px 10px -5px rgb(35 40 72 / 5%), 0px 3px 3px 0 rgb(80 80 112 / 5%), 0px 8px 8px 0 rgb(35 40 72 / 5%); border-top-color:var(--color-background-gray); z-index:400; } #freundinnen-im-umkreis.scroll #suche-freundin .input-text { box-shadow:0px -3px 8px -5px rgb(35 40 72 / 5%), 0px -4px 4px 0 rgb(80 80 112 / 5%), 0px -2px 8px 0 rgb(35 40 72 / 5%); border-bottom-right-radius:0; border-bottom-left-radius:0; } #freundinnen-im-umkreis, #freundinnen-im-umkreis .zipcode-search, #freundinnen-im-umkreis #freundinnen-suche-filter, #freundinnen-im-umkreis #suche-freundin .input-text { transition:all 0.5s ease-in-out, margin 0.25s ease-in-out, border-radius 0.25s ease-in-out, box-shadow 0.125s ease-in-out; } #freundinnen-im-umkreis .zipcode-search-icon-filter { display:none; } #freundinnen-im-umkreis.scroll .zipcode-search-icon-delete { display:none; } #freundinnen-im-umkreis.scroll .zipcode-search-icon-filter { display:flex; } #freundinnen-im-umkreis.scroll.freundinnen-suche-filter-closed .zipcode-search-icon-filter { display:flex; } #freundinnen-im-umkreis.scroll.freundinnen-suche-filter-closed #suche-freundin .input-text { box-shadow:0 16px 10px -5px rgb(0 164 186 / 11%), 0 0 3px 0 rgb(35 40 72 / 10%), 0 2px 8px 0 rgb(0 164 186 / 11%); border-radius:var(--raster); } #freundinnen-im-umkreis.scroll.freundinnen-suche-filter-closed #freundinnen-suche-filter { display:none; } #freundinnen-im-umkreis.autocomplete-visible.scroll #suche-freundin .input-text, #freundinnen-im-umkreis.autocomplete-visible #suche-freundin .input-text { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-color:var(--color-white); } /* Line #28 components/main_profile.css */