/* Theme Name: Blaustern Yoga Description: Author: Sören Rustemeyer Author URI: https://danndasda.de Template: twentytwentyone Version: 1.0 Text Domain: Blaustern Yoga */ @font-face { font-family: "oswald"; src: url('https://test.danndasda.de/wp-content/themes/blaustern-theme/bilder/Oswald-VariableFont_wght.woff2') format('woff2'), url('https://test.danndasda.de/wp-content/themes/blaustern-theme/bilder/Oswald-VariableFont_wght.ttf') format('truetype'); font-style: normal; font-display: swap } @font-face { font-family: "inter"; src: url('https://test.danndasda.de/wp-content/themes/blaustern-theme/bilder/Inter-VariableFont.woff2') format('woff2'), url('https://test.danndasda.de/wp-content/themes/blaustern-theme/bilder/Inter-VariableFont.ttf') format('truetype'); font-style: normal; font-display: swap } :root { --vh: 100vh; --width: 58rem; } * { box-sizing:border-box; outline:none !important; -webkit-overflow-scrolling: touch; -webkit-appearance: none; appearance: none; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } p { margin: 0;} .entry-content h1:first-child, .entry-content h2:first-child, .entry-content h3:first-child, .entry-content h4:first-child, .entry-content h5:first-child { margin-top: 0 !important} #comments { display:none} br:after { width: 100%; content:""} h1, h2, h3, h4, h5, h6 { margin: 0; font-family: "oswald"; font-weight: normal; line-height: 1.3; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin-bottom: .7rem;} .entry-content h1, .entry-content h2, .entry-content h3 { font-size: 1.5rem;} footer { padding-bottom: 20px !important; font-size: 0.7rem; text-transform:uppercase; margin-top: 2rem;} .post-navigation, .archive .page-header { display: none;} html { overflow-y: auto; min-height: 100%; font-size: 2.2vh; line-height: 1.5; } body { color: black; background: white; font-family: "inter"; letter-spacing: 0.03rem; margin: 0; overflow: clip; } body article a { color: #59948F; text-decoration: underline; } body article a:hover { color: blue;} .entry-footer { display: none;} #fade_in { transition: opacity .8s; } #fade_in:not(.not_ready) { opacity: 1 !important;} #bg_wrapp { display: none;} #info { position: fixed; width: 100%; text-align: center; background: white; color: green; text-align: center; padding: .25rem; margin: auto; top: 50%; left: 0; z-index: 100; display: none; box-shadow: 0 0 .25rem 0 rgba(0,0,0,0.75); transform: translateY(-50%); font-size: 1.1em; } #bg_img { position: fixed; height: 100vh; width: 100%; top: 0; left: 0; position: fixed; z-index: -1; background-size: cover; background-position: top center; background-repeat: no-repeat; background-image: url(bilder/bg_home.webp);} #bg_img:before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: white; opacity: .5; z-index: 1;} #bg_img i-i { position: absolute; aspect-ratio: 1/1; width: 50%; transition: transform .5s; background-size: contain; background-position: top left; background-repeat: no-repeat; transform: translate(0, -2%); } #bg_img i-i:nth-child(1) { background-image: url(bilder/blume-1.webp); top: 0; left: 0; } #bg_img i-i:nth-child(2) { background-image: url(bilder/blume_2.webp); top: 0; right: 0; background-position: top right; } #bg_img i-i:nth-child(3) { background-image: url(bilder/blume_3.webp); bottom: 0; right: 0; left: 0; margin: auto; background-position: center; transform: translate(0, 50%) rotate(-0deg); } .page-template-useiten #bg_img i-i:nth-child(1) { transform: translate(-2%, -1%) rotate(-2deg) scale(1,1.05);} .page-template-useiten #bg_img i-i:nth-child(2) { transform: translate(-2%, -1%) rotate(2deg) scale(1.05,1); } .page-template-useiten #bg_img i-i:nth-child(3) { transform: translate(1%, 53%) rotate(0deg) scale(.99,.99); } .post-name-ueber-mich #bg_img i-i:nth-child(1) {transform: translate(-3%, -3%) rotate(1deg) scale(1.04,1.02);} .page-template-kurse #bg_img i-i:nth-child(1) { transform: translate(-1.5%, -1.5%) rotate(2.5deg) scale(1.04,1);} .page-template-kurse #bg_img i-i:nth-child(2) { transform: translate(-1.5%, -1%) rotate(-1.5deg) scale(1,1.06); } .page-template-kurse #bg_img i-i:nth-child(3) { transform: translate(-3%, 52%) rotate(-3deg) scale(.99,.99); } .page-template-preise #bg_img i-i:nth-child(1) { transform: translate(-2%, -3.5%) rotate(2.6deg) scale(1.03,1);} .page-template-preise #bg_img i-i:nth-child(2) { transform: translate(-3%, 3%) rotate(5deg) scale(1,1.04); } .page-template-preise #bg_img i-i:nth-child(3) { transform: translate(-2%, 52%) rotate(-2deg) scale(.99,.99); } .page-template-raeume #bg_img i-i:nth-child(1) { transform: translate(-2.5%, -3.2%) rotate(3deg) scale(1.02,1);} .page-template-raeume #bg_img i-i:nth-child(2) { transform: translate(-3.2%, 2%) rotate(3deg) scale(1,1.04); } .page-template-raeume #bg_img i-i:nth-child(3) { transform: translate(-2%, 52%) rotate(-2deg) scale(.99,.99); } .menu-1-container { position: sticky; top: -2rem; z-index: 2; transition: all .5s; } body:not(.page-template-home):not(.page-template-useiten) .menu-1-container { margin-top: -2rem; margin-bottom: -2rem; } .page-template-useiten .menu-1-container { margin-top: -.5rem; } #menu-1 { height: 9.5rem; background: radial-gradient(circle,rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .9) 90%); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; } #menu-1 li { list-style-type: none; display: inline;} #menu-1 a:not(#menu-item-31 a), #menu-1 a:visited:not(#menu-item-31 a), #menu-1 p { font-family: 'oswald'; text-transform: uppercase; font-size: 1.6rem; text-decoration: none; color: #444; display: block; line-height: 3.5rem; overflow: hidden; white-space: nowrap; cursor: pointer; } #menu-1 li:nth-child(1) a, #menu-1 li:nth-child(2) a { margin-right: 2.75rem } #menu-1 li:nth-child(6) p, #menu-1 li:nth-child(7) a { margin-left: 2.55rem} #menu-item-31 a { width: 13.2rem; height: 12rem; font-size: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(bilder/blaustern_logo.svg); margin: 8.5rem -.4rem 0 -.4rem; display: block; transform-origin: top center; } .page-template-useiten #menu-item-31 a { background-image: url(bilder/blaustern_logo_angebot.svg); } #main > article{ background-color: rgba(255,255,255,.9);} #main > article > * { width: var(--width); margin: auto; } .post-name-home #main > article, .page-template-useiten #main > article { padding: 6rem 0 1.5rem 0; text-align: center;} .post-name-home #main h1, .page-template-useiten #main h1, .page-template-preise #main h1, .page-template-default #main h1 { color: #8D9BD4; font-size: 3.5rem; font-weight: normal; text-transform: uppercase; margin-bottom: .25rem;} .page-template-default #main h1 { margin: 0 0 1rem 0; } .page-template-default:not(.post-name-ueber-mich) #main article { padding: 3rem 0;} h1 span, h2 span, h3 span, h4 span { color: #A387CA;} #menu-1 .current_page_item > *:not(#menu-item-31 a), #menu-1 .current_page_item a:visited:not(#menu-item-31 a) { color: #4C66CD; position: relative; } #menu-1 .current_page_item > *:not(#menu-item-31 a):before, #menu-1 .current_page_item a:visited:not(#menu-item-31 a):before { position: absolute; height: .2rem; width: 2rem; bottom: 0; left: 0; background-color: #4C66CD; content: ""; display: block;} a { cursor: pointer !important; } .krs_main { background: radial-gradient(circle,rgba(99, 122, 212, 0) 0%, rgba(99, 122, 212, 1) 100%); position: relative; z-index: 0; } .krs_main > div { width: calc(var(--width) + 17.5rem); margin: auto; padding: 5rem 3.9rem; position: relative; overflow: clip; } .krs_wrp_cnt { width: calc(100%); display: flex; } .krs_wrp {transition: all .3s; margin: auto; width: calc(100% + 5rem); } .krs_wrp_cnt > div { background-color: #8D9BD4; padding: 1.5rem; width: calc(33.33333333333333333333333333333333% - 5rem); margin-right: 5rem; text-align: center; font-size: .8rem; position: relative; flex-shrink: 0; border-radius: .2rem; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0.2rem 0px; ;} #kurslevel .krs_wrp_cnt > div { width: calc(33.33333333333333333333333333333333% - 4rem); margin-right: 4rem; box-shadow: none; background-color: white; } #kurslevel .krs_wrp { width: calc(100% + 4rem);} .krs_wrp_cnt > div:hover * { filter: none;} .krs_wrp_cnt > div h2 { color: #8D9BD4; text-transform: uppercase; font-size: 2.5rem; margin-bottom: 1.4rem; font-weight: normal; line-height: 1;} .krs_wrp_cnt > div:last-of-type { margin-right: 0;} .krs_wrp_cnt > div > section:nth-child(1) { position: absolute; width: 100%; left: 0; top: 0; height: calc(100%);} .i_ob { padding: .7rem; position: relative; z-index: 2; background-color: white; color: rgb(117 82 166); display: flex; align-items: center; box-shadow: 0 0 .2rem 0 rgba(0,0,0,.5); font-size: .75rem; } .i_ob.i_ob.i_ob_active { height: fit-content; align-items: normal;} .i_ob.i_ob.i_ob_active p { max-height: unset; -webkit-line-clamp: unset} .i_ob p { line-height: 1.1rem; max-height: 2.2rem; overflow: hidden; width: calc(100% - 2.5rem); text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; position: relative; z-index: 2; background-color: white; } .i_ob a{ font-size: 0; height: 2rem; width: 2rem; background-color: rgb(163, 135, 202); border-radius: .3rem; display: block; background-image: url(bilder/link_insta.svg); background-size: 80%; background-repeat: no-repeat; background-position: center; margin: 0 0 0 auto; } .krs_wrp_cnt > div > section:nth-child(2) { position: absolute; width: 100%; height: fit-content; padding: .75rem; right: 0; bottom: 0; background-color: rgba(255,255,255,.3); box-shadow: 0 0 .2rem 0 rgba(0,0,0,.5);} .soc_meta { display: flex; align-items: center; justify-content: end; height: 2rem; border-radius: .3rem; padding: 0 .25rem; width: fit-content; background-color: white; margin: 0 0 0 auto; border: solid .05rem #aaa; } .soc_meta span { display: block; width: 1.7rem;; height: 1.3rem; line-height: 1.2rem; margin: 0 .25rem; background-size: 100%; background-position: center; background-repeat: no-repeat; font-weight: 600; color: white; font-size: .6rem; } .soc_meta span:nth-child(1) { background-image: url(bilder/herz.svg); } .soc_meta span:nth-child(2) { background-image: url(bilder/kommentare.svg); } .krs_wrp_cnt > div > section > img { position: absolute; width: 100%; height: calc(100% - 3rem); object-fit: cover; object-position: center; top: 3rem; left: 0; z-index: 0; } .krs_wrp_cnt > div > section:nth-child(1):before { width: 2rem; height: 2rem; content: ""; position: absolute; left: .75rem; bottom: .75rem; border-radius: .3rem; background-color: #a2aac9; background-position: center; background-size: 70%; z-index: 1; background-repeat: no-repeat; } .krs_wrp_cnt > div > section:nth-child(1) img:hover{ filter: brightness(1.2);} .carousel_album > section:nth-child(1):before { background-image: url(bilder/insta-mehrere.svg);} .video > section:nth-child(1):before { background-image: url(bilder/insta-movie.svg);} .image > section:nth-child(1):before { background-image: url(bilder/insta-image.svg);} .krs_vor_zurueck { position: absolute; width: 1rem; height: 3rem; background-image: url(bilder/pfeil_links.svg); background-position: center; background-repeat: no-repeat; background-size: contain; left: 0; margin: auto; top: 0; bottom: 0; cursor: pointer; z-index: 5;} .krs_vor { background-image: url(bilder/pfeil_rechts.svg); left: auto; right: 0;} #insta_feed_wr { background: rgba(163, 135, 202, .2);} #insta_feed_wr .krs_wrp_cnt > div { height: 28rem; overflow: hidden;} .not_top .menu-1-container:before, body:not(.page-template-home):not(.page-template-useiten) .menu-1-container:before { content: ""; display: block; height: calc(100% - 2rem); top: 0; left: 0; width: 100%; background-color: white; position: absolute; z-index: -1; box-shadow: 0 0 .2rem 0 rgba(0,0,0,.5);} .not_top #menu-item-31 a, body:not(.page-template-home):not(.page-template-useiten) #menu-item-31 a { margin-top: 0; height: 5.5rem;} .not_top #menu-1, body:not(.page-template-home):not(.page-template-useiten) #menu-1 { background: none;} iframe { width: 100%; border: none; height: 100vh; transition: opacity .5s; opacity: 0;} #f_info { background-color: white; padding: 1.5rem 0; } #f_info > div { width: calc(var(--width) + 9.5rem); margin: auto; display: flex;} #f_info > div > div { margin: auto;} #f_info > div > div:nth-child(1) { margin-left: 0;} #f_info > div > div:nth-child(3) { text-align: right;} #f_info > div > div:nth-child(4) { text-align: right; margin-right: 0;} #f_info h3 { color: #8D9BD4; font-size: 2.5rem; font-weight: normal; text-transform: uppercase; margin-bottom: .5rem !important; line-height: 1.2; } #f_info .social p { display: flex; margin: auto;} #f_info .social p a { width: 2.3rem; background-image: url(bilder/link_nebenan.svg); margin-right: 1.7rem; aspect-ratio: 1/1; background-size: 52%; background-repeat: no-repeat; background-position: center; background-color: #8D9BD4; font-size: 0; border-radius: .1rem;} #f_info .social p a:last-child { margin-right: 0;} #f_info .social p a:nth-child(2) { background-size: 90%;} #f_info .social p a:nth-child(1) { background-image: url(bilder/link_facebook.svg);} #f_info .social p a:nth-child(3) { background-image: url(bilder/link_insta.svg);} #f_info .social h3 { margin-bottom: .8rem !important;} #imp_dat_cred { margin: 6rem 0 9rem 0; text-align: center; text-transform: uppercase; color: #888; font-size: .85rem; line-height: 2; font-weight: bold;} #imp_dat_cred a, #imp_dat_cred a:visited { color: #444; text-decoration: none; font-weight: normal; font-size: .82rem;} m-m { color: #8D9BD4;} #imp_dat_cred b { padding: 0 .1rem; } #kontakt { width: 100% !important; background-color: rgba(230,230,230,.5); padding: 4rem 0 5rem 0; } #kontakt > div { width: calc(var(--width) + 9.5rem); margin: auto; } #kontakt_main { padding: 4rem 4rem 3rem 4.5rem; background-color: rgba(225,225,240,.6); margin: auto; display: flex; border: solid .1rem rgba(0,0,255,.3);} #kontakt_main > div:first-child { width: 65%; padding-right: 4.5rem;} #kontakt_main > div:last-child { width: 35%;} input, #anfbettr { width: 100%; height: 3.5rem; line-height: 3.2rem; margin-bottom: 1rem; border: none; font-family: "inter"; font-size: 1.1rem; padding: 0 1rem; border-top: solid .65rem white; border-bottom: solid .25rem white; position: relative; border-radius: 0; } input:hover, input:focus, textarea:hover, textarea:focus { border-bottom: solid .25rem #8D9BD4; } input:focus { border-top: solid .65rem rgb(255, 247, 216);} input:focus, textarea:focus { background-color: rgb(255, 247, 216);} textarea { width: 100%; resize: vertical; height: 11.3rem; font-family: "inter"; font-size: 1.1rem; padding: 1rem; border-bottom: solid .25rem white; line-height: 1.4; border-radius: 0; position: relative; z-index: 0; border: none; } #sub_mit { width: calc(50% - .5rem); margin: 0 0 0 auto; text-transform: uppercase; font-weight: bold; text-align: center; cursor: pointer; background-color: #A487CA; line-height: 3.5rem; text-transform: uppercase; color: white;} #verst { display: flex; margin: 1rem 0 1.3rem 0;} #verst p:last-child { width: calc(100% - 3rem);} #verst_ok { width: 2.4rem; height: 2.4rem; cursor: pointer; background-color: white; margin-right: 1rem; position: relative; top: .3rem;} #verst_ok.ac { background-color: #8D9BD4; border: solid .5rem white; } label { display: none;} #vonanachna { display: flex;} #vonanachna input { width: calc(50% - .5rem);} #vonanachna input:last-child { margin-left: 1rem;} #kontakt_h h2 { text-transform: uppercase; line-height: 1.2; margin-bottom: 1rem;} #kontakt_h { text-align: center; margin-bottom: 2rem;} #kontakt_h > p { font-weight: bold; color: #7755a6; letter-spacing: .06rem; margin-bottom: .5rem;} #kontakt_h .pfeil_runter { width: 5rem; height: 5rem;} #kontakt_h > h2:nth-of-type(1) { font-size: 3.5rem; line-height: 1.3; color: #8D9BD4; } #kontakt_h > h2:nth-of-type(2) { font-size: 3.5rem; margin-top: 3.5rem; color: #8D9BD4;} #agentur_wrapper a, #footer a, #footer m-m, #agentur_wrapper m-m { background-size: 1.5rem; background-position: left center; background-repeat: no-repeat; padding-left: 2rem; height: 2rem; display: flex; margin-bottom: .3rem; color: blue; align-items: center; justify-content: left; text-decoration: none; } #agentur_wrapper > p { margin: .8rem 0;} #agentur_wrapper > p:first-of-type { margin-bottom: 0;} #agentur_wrapper > h2:first-child { font-size: 2.5rem; margin-bottom: 1.5rem; text-transform: uppercase; color: #8D9BD4; line-height: .8;} .mehl { background-image: url(bilder/mehl.svg); } .tel { background-image: url(bilder/phone.svg); } .maps { background-image: url(bilder/maps_icon.svg); margin-top: 1rem; } .post-name-ueber-mich #main > article { display: flex; background-color: rgba(99, 122, 212, .6);} .post-name-ueber-mich .entry-header:first-of-type { display: none;} .post-name-ueber-mich .entry-header { width: 50% !important; margin: 0 !important;} .post-name-ueber-mich figure { position: sticky; width: 100%; height: calc(100vh - 5rem); margin: 0; top: 5.5rem; } .post-name-ueber-mich figure img { height: 70vh; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; aspect-ratio: 21/32; object-fit: cover; display: block; width: auto; box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.2rem 0; border-radius: .1rem; object-position: top; background-color: rgba(99, 122, 212, .6);} .post-name-ueber-mich .entry-content { width: 50% !important; background-color: white; padding: 3rem 4rem; margin: 0 0 0 auto !important;} .post-name-ueber-mich .entry-content h2 { font-size: 3.5rem; color: #8D9BD4; margin-bottom: 2rem; text-transform: uppercase;} .post-name-ueber-mich .entry-content p { line-height: 1.8; margin-bottom: 1rem;} .post-name-angebot .entry-content { width: 100% !important;} .sub_menu { display: flex; justify-content: center; align-items: center; margin-top: 0; padding: 1rem 0; position: sticky; top: 5.5rem; z-index: 3;} .not_top .sub_menu { background-color: white; box-shadow: 0 0 .2rem 0 rgba(0,0,0,.5);} .sub_menu > p { height: 1.8rem; display: flex; align-items: center; padding: 0 .8rem; width: fit-content; margin: 0 .8rem; font-weight: bold; text-transform: uppercase; font-size: .75rem; border-radius: .2rem; background-color: #A4ADD7; color: white; cursor: pointer;} .sub_menu > p:hover, .sub_menu > p:hover * { color: #fcff9b} .sub_menu > p.ac { background-color: #A387CA; } .sub_menu > p span { color: white; padding-left: .125rem;} #us_wrapp { padding-top: 3rem;} #us_wrapp > div { text-align: center; padding: 2rem 0; position: relative; min-height: 90vh; } #us_wrapp .parent_main { width: calc(var(--width)); margin: auto; position: relative; } #us_wrapp > div h2.us_h2 { font-family: 'oswald'; color: #8D9BD4; text-transform: uppercase; font-size: 3.3rem; margin-bottom: 0; line-height: 1.4; width: fit-content; padding: 0 1rem; margin: 0 auto; z-index: 0; position: relative;} .ac h2.us_h2 { color: #A387CA !important;} #us_wrapp > div h2.us_h2 span { padding-left: .125rem;} #us_wrapp > div h2.us_h2.ac { background-color: white; box-shadow: 0 0 .2rem 0 rgba(0,0,0,.5);} #us_wrapp .parent_main table { width: 100%; margin-top: .5rem;} #us_wrapp > div:not(#p_firmenyoga) h2 { margin-top: 6rem;} #us_wrapp > div:not(#p_firmenyoga) .parent_main { margin: 4rem auto 4rem auto; font-weight: bold; } #us_wrapp > div:not(#p_firmenyoga) .parent_main p { margin-bottom: 1rem; line-height: 1.6;} #us_wrapp > div:nth-child(3n) { background-color: white;} #us_wrapp .parent_main table { display: flex; flex-direction: column; border-collapse: collapse; width: 100%; } #us_wrapp .parent_main table li, #us_wrapp .parent_main table p { margin-bottom: 1rem;} #us_wrapp .parent_main table tr { display: flex; } #us_wrapp .parent_main table td { text-align: right; width: calc(50% - .125rem); display: block; } #us_wrapp .parent_main table td:nth-child(1) { padding: 3rem 1.5rem 2rem 0;} #us_wrapp .parent_main table td:nth-child(2) { width: .25rem; background-color: #8D9BD4; } #us_wrapp .parent_main table td:nth-child(3) { text-align: left; padding: 5rem 1rem 3rem 0; } .u_child_wrapp { border-top: solid .25rem #8D9BD4; border-bottom: solid .25rem #8D9BD4; position: relative; } .child_cnt { display: flex; position: sticky; top: 5.5rem;} .child_cnt > div { width: 50%; text-align: left; } .child_cnt:not(:first-child) > div:first-child { background-color: rgba(99, 122, 212, 0.3);} .child_cnt > div:nth-child(2) > div { background-color: white; width: 100%; padding: 1rem 0;} .child_cnt strong { color: #8D9BD4;} .child_cnt h2 { color: #8D9BD4; margin-bottom: 1rem; font-size: 2rem;} .child_cnt p { margin-bottom: 1rem;} .child_cnt p:last-child{ margin-bottom: 0;} s-t { position: absolute; width: 50%; top: 0; z-index: -1; right: 0; height: 100%;} s-t:before { content: ""; position: sticky; background-color: white; width: 100%; height: 100%; top: 0; display: block;} .child_cnt > div:nth-child(2) { padding: 1rem 1rem 1rem 3.5rem; display: flex; align-items: center; background-color: transparent;} #us_wrapp figure { position: sticky; width: 100%; margin: 0; top: 5.5rem; } .child_cnt figure { height: calc(100vh - 5.5rem); } .u_child_wrapp > div:not(:first-child) { margin-top: -3.7rem;} #us_wrapp > div > figure img { width: 100%; position: absolute; top: 0; left: 0; right: 0; object-fit: cover; display: block; height: calc(100vh - 5.5rem);; box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.2rem 0; border-radius: .1rem; object-position: top; background-color: rgba(99, 122, 212, .6); } .child_cnt > div > figure img { width: calc(100% - 8rem); position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; aspect-ratio: 16 / 10; object-fit: cover; display: block; height: auto; box-shadow: rgba(0, 0, 0, 0.5) 0 0 0.2rem 0; border-radius: .1rem; object-position: top; background-color: rgba(99, 122, 212, .6); } .page-template-preise #main { min-height: calc(100vh); position: relative;} #pr_wrapp { width: calc(var(--width) + 20rem); margin: auto; top: -8%; bottom: 0; left: 0; right: 0; position: absolute; height: fit-content;} #pr_wrapp:after { content: ""; display: table; clear: both;} #pr_wrapp > div { width: calc(33.33332% - 1.33332rem); margin: 0 2rem 2rem 0; float: left; } #pr_wrapp > div:nth-child(3) { margin-right: 0;} #pr_wrapp > div:nth-child(1), #pr_wrapp > div:nth-child(3) { transform: translateY(50%);} #pr_wrapp > div > div { background-color: #A387CA; text-align: center; border-radius: .2rem; padding: .5rem 1rem 1.3rem 1rem; color: white; position: relative;} #pr_wrapp > div > div p { font-size: .9rem;} #pr_wrapp > div > div h2 { text-transform: uppercase; margin-bottom: .125rem; font-size: 2.3rem;} #pr_wrapp > div:nth-child(2) > div { background-color: #9099D2;} .pr_child_wrapp { margin-top: 2rem;} .pr_child_wrapp:before { content: ""; position: absolute; left: 0; right: 0; top: -2.5rem; margin: auto; height: 3rem; width: 2rem; background-color: #9099D2;} .pr_pr { margin: 1rem auto 0 auto; font-weight: bold; color: rgb(248, 248, 158); background-color: rgba(255,255,255,.1); padding: 0 1rem; width: fit-content; height: 2rem; line-height: 2rem; font-size: 1.2rem; display: flex; align-items: center;} .pr_pr s-s { color: rgba(255,255,255,.75); color: white; font-weight: normal; font-size: .8rem; padding-left: .5rem;} .pr_p_cnt { display: flex; flex-direction: column; justify-content: center; overflow: hidden; height: 3.9rem; margin-bottom: 1.2rem; } .pr_p_cnt > div { max-height: 100%; overflow: hidden;} .page-template-preise #main h1 { margin: 0; color: rgb(253, 253, 189); position: absolute; top: 7rem; left: 2rem; font-weight: bold; font-size: 3.35rem; opacity: .95;} #ra_wrapp { position: relative; top: -6.5rem ; left: 0; z-index: 0;} #ra_wrapp > div { position: sticky; top: 0; width: 100%; height: 100vh; left: 0;} #ra_wrapp > div:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background: linear-gradient(90deg,rgba(255, 252, 231, 0) 0%, rgba(255, 252, 231, 0) 70%, rgba(255, 252, 231, 1) 80%);} #ra_wrapp img { position: absolute; top: 0; left: -4%; width: 90%; height: 100%; object-fit: cover; object-position: bottom left; opacity: 0;} .loaded #ra_wrapp img { opacity: 1; transition: opacity .5s;} .page-template-raeume .menu-1-container:before { background-color: rgba(255,255,255,.3) !important; z-index: 1; box-shadow: none !important; background: linear-gradient(90deg,rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, .1) 80%)} .ra_parent_main { position: absolute; height: fit-content; top: 50%; transform: translateY(-50%); right: 3rem; width: 12rem; z-index: 3;} .ra_parent_main h2 { color: #8D9BD4; font-size: 2rem; margin-bottom: .8rem; text-transform: uppercase;} #prel_balken { width: 12rem; height: .5rem; position:fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; margin:auto; background: #ccc; color: white; text-align:center; font-size: .7rem; border-radius: .2rem; } #prel_balken p { margin: 0; position:absolute; top: 0; left: 0; height: .5rem; background: #8D9BD4; z-index: -1; border-radius: .2rem; max-width: 100%; } #prel_balken span { display: block; width: 100%; position:absolute; bottom: -1.5rem; color: #A487CA;; text-align: center} #mob_nav { display: none;} #bg_img_wrapp { display: none; width: 10rem; height: 80vh; position: fixed; border: solid .1rem #A387CA; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 100; background: #000; box-shadow: -.1rem -.1rem 0.29rem 0.00rem rgba(0,0,0,0.26); max-height: 80vh; max-width: 100%; border-radius: .2rem; transition: all .3s; } .bg_img_active::before { position: fixed; height: 100vh; width: 100vw; top: 0; left: 0; background-color: rgba(255,255,255,.95); z-index: 11; content: "";} .bg_img_active #bg_img_wrapp { display: block; } #img_x { color: white; z-index: 2; height: 2.5rem; line-height: 2.4rem; width: 2.5rem; position: absolute; top: -1.26rem; right: -1.26rem; text-align: center; cursor: pointer; font-weight: bold; background: #8D9BD4; border-radius: .2rem; border: solid .1rem white;} #img_load * { position: absolute; height: 100%; width: 100%; object-fit: cover; top: 0; left: 0; opacity: 1; z-index: 1; transition: opacity .3s; } .CAROUSEL_ALBUM #img_load { cursor: pointer;} #bg_img_wrapp .dim { opacity: 0;} #img_v_z_wrapp { position: absolute; bottom: .7rem; left: 0; display: flex; z-index: 2; display: none; } .CAROUSEL_ALBUM #img_v_z_wrapp { display: flex;} #img_v_z_wrapp p { height: 1.6rem; line-height: 1.45rem; width: 2.2rem; background-position: center; background-size: 45%; background-repeat: no-repeat; border: solid .1rem white; margin-left: .7rem; } #img_zurueck { background-color: #A387CA; background-image: url(bilder/prev_img.svg); cursor: pointer; border-radius: .3rem 0 0 .3rem; } #img_vor { background-color: #A387CA; background-image: url(bilder/next_img.svg); cursor: pointer; border-radius: 0 .3rem .3rem 0; } #img_count { background-color: #A387CA; text-align: center; color: white; width: 3.5rem !important; border-radius: .3rem; font-size: .9rem; } #img_count span { color: #FFF69F; } .med_load #img_count { background-color: #777;} .med_load #img_count span { animation-name: img_wechsel; animation-duration: .2s; animation-iteration-count: infinite;} .med_load #img_load *:not(.dim) { filter: grayscale(.4);} @keyframes img_wechsel { 0% { color: red; } 50% { color: #FFF69F } 100% { color: red; } } #h { width: 100vw; height: 100vh; position: fixed; z-index: -10; top: 0; left: 0;} #lvl_content { width: 100%; line-height: 1.4; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; display: grid; background-color: white; overflow: hidden; } #lvl_content > div { overflow: hidden; position: relative; width: var(--width); margin: auto; transition: opacity .3s; } #lvl_content > div > section { padding: 1.5rem; opacity: 0; transition: opacity .3s; } #lvl_content > div > section p { margin-bottom: 1rem;} #lvl_content > div > section p:last-of-type { margin-bottom: 0;} .lvl_content_ac #lvl_content { grid-template-rows: 1fr; } .lvl_content_ac.gft_ac section { opacity: 1 !important;} #lvl_krs .ac:before { content: ''; position: absolute; top: 100%; left: 0; right: 0; margin: auto; width: 3rem; height: 100%; background-color: white; } @media screen and (max-aspect-ratio: 100 / 56) { html { font-size: 1.3vw;} #menu-1 li:nth-child(1) a, #menu-1 li:nth-child(2) a { margin-right: 3.15rem; } #menu-1 li:nth-child(6) p, #menu-1 li:nth-child(7) a { margin-left: 2.95rem; } #pr_wrapp { width: calc(var(--width) + 10rem); font-size: .86rem;} } @media screen and (max-aspect-ratio: 30 / 40) { html { font-size: 5vw;} :root { --vh: 100vh; --width: 100% } #main > article > * { width: 100%;} #kontakt > div { width: 100%;} #f_info { padding: 1.5rem; background-color: transparent;} #f_info > div { width: 100%; display: block; } #f_info > div > div { border-bottom: dashed .1rem #A387CA; padding-bottom: 1.5rem; margin-bottom: 1.5rem;} #us_wrapp .parent_main { width: 100%; margin-top: 0 !important;} #pr_wrapp { width: 100%;} .krs_main > div { width: calc(var(--width) + 12em); padding: 3rem; } .krs_vor { right: .8rem;} .krs_zurueck { left: .8rem;} .krs_wrp_cnt > div { width: calc(50% - 1.5rem); flex-shrink: 0; margin-right: 3rem; } .krs_wrp_cnt { width: 100% } .krs_wrp_cnt > div { width: calc(100% - 3rem) !important; margin-right: 3rem !important; } #insta_feed_wr .krs_wrp_cnt > div {height: 25rem; } .krs_wrp { width: calc(100% + 3rem) !important;} .krs_main > div { width: 100%; } #insta_feed_wr { background: radial-gradient(circle,rgba(163, 135, 202, .85 ) 0%, rgba(99, 122, 212, 0) 100%);} #insta_feed_wr > div { padding: 2.85rem;} .i_ob { padding: .5rem; } .i_ob p { width: 100%;} .i_ob a { position: absolute; top: 3.75rem; right: .75rem;} .post-name-home #main h1, .page-template-useiten #main h1, .page-template-preise #main h1 { line-height: 1.1; margin-bottom: 1rem;} .post-name-home #main > article, .page-template-useiten #main > article { padding-left: 1.5rem; padding-right: 1.5rem;} #menu-1 li:not(:is(#menu-item-45, #menu-item-31, #menu-item-kontakt)) { display: none; } #menu-1 li:not(#menu-item-31) > * { margin: auto 0; position: fixed !important; top: 0; line-height: 5.55rem !important; height: 5.5rem; font-size: 1.4rem !important; z-index: 1;} #menu-1 #menu-item-45 > * { left: 1.3rem; } #menu-1 #menu-item-kontakt > * { position: fixed; right: 1.3rem; } #menu-1 .current_page_item > *:not(#menu-item-31 a):before, #menu-1 .current_page_item a:visited:not(#menu-item-31 a):before { bottom: 25%;} #kontakt_main { padding: 1.5rem; flex-direction: column-reverse; font-size: 1rem; width: calc(100% + 3rem); margin-left: -1.5rem; border-radius: 0; background-color: rgba(0,0,255,.05); border-left: none; border-right: none;} #kontakt_form { width: 100%;} #vonanachna { display: block;} #vonanachna input:last-child { margin-left: 0;} #kontakt_form input, #kontakt_form textarea { width: 100% !important; margin-left: 0; margin-right: 0;} #kontakt_main > div, #kontakt_main > div:first-child { width: 100%; padding: 0;} #verst { display: block;} #verst_ok { margin-bottom: 1.2rem;} #verst p:last-child { width: 100%; font-size: .9rem;} #agentur_wrapper > h2 { font-size: 1.5rem; margin-bottom: 4rem;} #agentur_wrapper > h2:first-child { line-height: 1.3;} #kontakt_h > h2:nth-of-type(3) { font-size: 2.5rem; line-height: 1.2;} #kontakt_h > h2:nth-of-type(1), #kontakt_h > h2:nth-of-type(2) { font-size: 2.95rem; line-height: 1.2;} #ff > div:first-of-type p { line-height: 1.3;} #agentur_wrapper > h2:before { height: .25rem; top: calc(100% + 1.5rem);} #kontakt_main > div:last-child { width: 100%; margin-bottom: 3rem;} #agentur_wrapper { font-size: 1rem;} #kontakt { padding: 1.5rem; padding-bottom: 0; background-color: transparent; } #sub_mit { padding: 1rem; line-height: 1.3; width: 100%; } #mob_button { position: fixed; bottom: 1rem; right: 0; left: 0; margin: auto; width: 2.9em; height: 2.9rem; border-radius: .5rem; background-color: #8D9BD4; transform: rotate(45deg); background-image: url(bilder/mob_button.svg); background-position: center; background-repeat: no-repeat; background-size: 60% auto; transform-origin: center; box-shadow: 0 0 .2rem .1rem rgba(0,0,0,0.1); z-index: 20; border: solid .05rem white;} .mob_on #mob_button {background-image: url(bilder/mob_on.svg); background-color: #9F89C8;;} #bg_img { width: 190%; left: -45%;} .page-template-useiten #bg_img i-i:nth-child(3) { transform: translate(1%, 20%) rotate(0deg) scale(.99,.99);} #menu-1 { background: none;} #page { background-color: rgba(255,255,255,.6);} .not_top .menu-1-container:before, body:not(.page-template-home):not(.page-template-useiten) .menu-1-container:before { background-color: rgba(255,255,255,1) !important;} #main > article { background-color: transparent;} #mob_nav { width: 100%; position: fixed; bottom: -16.05rem; background-color: rgba(250,250,250,1); z-index: 10; text-align: center; padding: 1.35rem 0 5.5rem 0; border-top: solid .25rem #8D9BD4; box-shadow: 0 0 .3rem .1rem rgba(0,0,0,0.2); transition: all .5s; display: block; } #mob_nav .current_page_item > *, .post-name-home #menu-item-119 > * { color: #A387CA !important;} #mob_nav * { opacity: 0; transition: all .5s;} .mob_on #mob_nav * { opacity: 1;} .mob_on #mob_nav { bottom: 0; background-color: white;} #mob_nav ul, #mob_nav li { display: inline; list-style-type: none; margin: 0; padding: 0;} #mob_nav a, #mob_nav a:visited, #mob_nav p { font-family: 'oswald'; text-transform: uppercase; font-size: 1.3rem; text-decoration: none; color: #444; display: block; line-height: 2.3rem; cursor: pointer; } .sub_menu { display: block; width: calc(100% + 3rem); margin-left: -1.5rem; background-color: transparent !important; top: 0; padding: .7rem .7rem} .sub_menu:before { content: ""; display: block; height: 100%; top: 0; left: 0; width: 100%; position: absolute; z-index: -1; } .not_top .sub_menu:before { background-color: white;} .sub_menu:after { content: ""; display: table; clear: both;} .sub_menu > p { width: 100%; margin: 0 auto .9rem auto; line-height: 3rem; justify-content: center; overflow: hidden; white-space: nowrap;} .sub_menu > p:nth-child(1), .sub_menu > p:nth-child(3) { float: left; margin: 0 .7rem .6rem 0; width: calc(50% - .45rem);} .sub_menu > p:nth-child(3) { margin-bottom: 0;} .sub_menu > p:nth-child(2), .sub_menu > p:nth-child(4) { float: left; margin: 0 0 0 0; width: calc(50% - .45rem);} #us_wrapp > div { background-color: transparent;} #us_wrapp { padding-top: 0;} #us_wrapp > div { width: calc(100% + 3rem); margin-left: -1.5rem; } #us_wrapp .parent_main table td:nth-child(1), #us_wrapp .parent_main table td:nth-child(2) { width: 100%; padding: 0;} #us_wrapp .parent_main table td:nth-child(2) { width: 0;} #us_wrapp .parent_main table td:nth-child(3) { padding: 0; width: 100%;} .child_cnt > div:nth-child(2) { background-color: transparent; padding: 0;} .child_cnt > div:nth-child(2) > div { padding: 1.5rem 3rem 3rem 3rem; } #us_wrapp .parent_main table tr { display: block;} #p_firmenyoga ul { padding-left: 0; width: calc(100% - 3rem); margin-left: 1.2rem;} #us_wrapp > div h2.us_h2 { margin: 2rem auto 0 auto !important; line-height: 1.2 !important; font-size: 3rem;} #p_yoga-fuer-den-ruecken #us_wrapp > div h2.us_h2 { margin-top: 0 !important;} #us_wrapp > div:not(#p_firmenyoga) .parent_main { margin-bottom: 0;} .u_child_wrapp { border: none;} .child_cnt { display: block; width: calc(100% + 3rem); margin-left: -1.5rem; position: relative; top: 0;} .child_cnt > div { width: 100%; background-color: white; position: relative; z-index: 1; } .child_cnt > div:nth-child(1) { position: sticky; top: 5.5rem; z-index: 0; } .child_cnt > div > figure img { width: 100%; bottom: auto; position: relative; margin-top: 3.7rem;} .child_cnt figure { height: auto;} .parent_main { padding: 1.5rem; padding-bottom: 0;} .page-template-preise #main { min-height: auto; position: relative;} #pr_wrapp { position: static; margin-top: 1.5rem;} #pr_wrapp > div { width: calc(100% - 2rem); float: none; margin: 0 auto 1.5rem auto !important;} #pr_wrapp > div > div { padding-left: .5rem; padding-right: .5rem;} #pr_wrapp > div:nth-child(1), #pr_wrapp > div:nth-child(3) { transform: none; } #us_wrapp > div#p_yoga-fuer-den-ruecken h2{ margin-top: 0 !important;} #ra_wrapp { top: -1.5rem; } #ra_wrapp > div { height: fit-content; position: static;} .loaded #ra_wrapp img { width: calc(250% + 4rem); margin-left: calc(-2rem); height: 140vw; position: static; animation-name: raeume_img; animation-duration: 40s; animation-iteration-count: infinite; animation-timing-function: linear; object-position: bottom center; border-top: solid .15rem #8D9BD4; border-bottom: solid .15rem #8D9BD4; } #ra_wrapp > div:nth-child(2n) img { animation-direction: reverse;} .ra_parent_main h2 { font-size: 2.95rem;} .ra_parent_main { position: relative; transform: none; padding: 2.5rem 1.1rem .5rem 1.1rem; top: 0; left: 0; margin: 0; right: 0; width: 100%; background-color: rgba(255,255,255,.2); text-align: center;} #ra_wrapp > div:before { display: none;} @keyframes raeume_img { 0% { transform: translateX(0);} 50% {transform: translateX(-45%);} 100% {transform: translateX(0);} } iframe { position: relative; height: 80vh; z-index: 0;} .post-name-ueber-mich #main > article { display: flex; background-color: black;} .post-name-ueber-mich .entry-header { width: 100% !important; } .post-name-ueber-mich figure img { bottom: auto; box-shadow: none; height: auto; width: 107vw; left: -7vw;} .post-name-ueber-mich figure { z-index: 0; } .post-name-ueber-mich .entry-content { width: 100% !important; flex-shrink: 0; position: relative; z-index: 1; padding: 50vh 1.5rem 1.5rem 1.5rem; background: linear-gradient(180deg,rgba(141, 155, 212, 0) 0, rgba(141, 155, 212, 0) 40vh, rgba(141, 155, 212, .8) 120vw); color: white; } .post-name-ueber-mich .entry-content h2 { color: white; margin-bottom: 1.3rem; line-height: 1.1;} #kontakt_h > p { margin-bottom: 1rem;} .post-name-impressum #main article, .post-name-datenschutz #main article, .post-name-agb #main article { padding: 1.5rem;} .post-name-impressum #main article p, .post-name-datenschutz #main article p, .post-name-agb #main article p { margin-bottom: 1.5rem} .page-template-default .entry-title { text-transform: uppercase; margin-bottom: 1.5rem;} .page-template-default .entry-content h2, .page-template-default .entry-content h3 { margin-top: 2rem; margin-bottom: .7rem;} #bg_img_wrapp { width: calc(100% - 2rem); max-height: calc(100% - 7.7rem); border-radius: 0; top: -1.5rem; } #img_x { right: -.1rem; top: -3rem; border-radius: .2rem; border: none; width: 2.2rem; height: 2.2rem; line-height: 2.2rem;} #img_v_z_wrapp { bottom: 1.5rem; position: fixed; left: .3rem;} .bg_img_active #mob_button { display: none;} } @media screen and (min-aspect-ratio: 16 / 8) { html { font-size: 1.1vw;} }