/*https://fontawesome.com/search?q=Question&o=r&m=free */ * { box-sizing: border-box;padding:0;margin:0; font-family: 'Open Sans', sans-serif;line-height:1.6} /* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(/wp-content/themes/coachingbande/assets/fonts/material-icons.woff2) format('woff2'); } :root { --main-green: #a3c6bf; --bckgrnd-yellow: #faf0df; --font-size: 16px; --spacing9: 9px; --spacing18: 18px; --spacing36: 36px; --spacing-s: 9px; --spacing-m: 18px; --spacing-l: 36px; --spacing-xl: 45px; } .gap-s { height: var(--spacing-s); width: 100%;} .gap-m { height: var(--spacing-medium); width: 100%;} .gap-l { height: var(--spacing-l); width: 100%;} .gap-xl { height: var(--spacing-xl); width: 100%;} a{text-decoration:none;color:var(--orange)} a:hover{text-decoration:underline; cursor:pointer;} img{max-width:100%;height:auto;display:block} .inner{width:100%;max-width:1200px;margin:0 auto;padding:0 18px} .bg-g{background:#f8f8f8} .border{position:relative} .border:after{content:'';display:block;width:80px;height:1px;background:var(--orange);position:absolute;bottom:0} .clear:after{content:'';display:table;clear:both} .hidden{display:none} .tac {text-align:center;} .bld {font-weight:bold;} h1 {color:var(--main-green);} h2, h3, h4 {color:#212327} h3 {color:#212327;line-height:1.6;font-weight: 700;font-size: 1.25rem;margin-bottom: 16px;font-family: 'Open Sans', sans-serif} :not(#footer) h1::after, :not(#footer) h2::after, :not(#footer) h3::after{ content: " "; display: block; margin-top: 9px; margin-bottom: 18px; height: 2px; width: 90px; background: #a3c6bf; } .wrapper {width:calc(100% - 36px);max-width:1140px;margin:0 auto;} main { min-height: calc(100VH - 388px); margin:36px auto; overflow-x: hidden;} blockquote { font-style: italic; color: #555; border-left: 5px solid #ccc; margin: 20px 0; padding: 10px 20px; background-color: #f9f9f9; } blockquote::before { content: "\201C"; /* Linkes Anführungszeichen */ font-size: 2em; color: #ccc; position: absolute; left: 10px; top: 10px; } header {} #topbar {padding-left: 30px; padding-right: 30px; color:#fff;background:#a3c6bf;font-size:14px;height:45px;line-height:46px;font-size:16px;} #topbar #tbwr {display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: calc(100vw - 27px);max-width: 1140px; margin:0 auto;} #topbar #tble {display:flex;align-items:center;flex: 0 0 auto} #topbar #tbre {display:flex;align-items:center} #topbar #tbwr #tbre a {padding:0 12px;line-height:46px;height:46px;border-left:1px solid #fff;display:flex; align-items:center} #topbar #tbwr #tbre a:last-of-type {border-right:1px solid #fff} #topbar #tbwr #tbre a img {display:flex; align-items:center;height:14px; padding-right:9px} #heroimg { display: block; width: auto; margin: 20px auto;} .featurebox {max-width:1200px; margin: 0 auto;} .featurebox .feature{padding:60px 0; display:grid; gap:30px;} .featurebox .feature-title small{font-size: smaller; color: var(--orange) !important; font-weight: 300;} .featurebox .feature-title h3{word-break:break-word; font-size: 45px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #333; letter-spacing: 4px;} .featurebox .feature-img img{border-radius:3px; margin:0 auto;} .featurebox .feature-text p {line-height: 1.6; color: #333; font-weight: 400;} @media(min-width:1200px){ .feature{ grid-template-columns:1fr minmax(-webkit-min-content,-webkit-max-content); grid-template-columns:1fr minmax(min-content,max-content); -webkit-column-gap:130px; -moz-column-gap:130px; column-gap:130px; } .feature:nth-child(2n){ grid-template-columns:minmax(-webkit-min-content,-webkit-max-content) 1fr; grid-template-columns:minmax(min-content,max-content) 1fr; } .feature:nth-child(even) .feature-text, .feature:nth-child(even) .feature-title { padding: 0 0 0 20%;} .feature:nth-child(odd) .feature-text, .feature:nth-child(odd) .feature-title { padding: 0 20% 0 0;} } @media(min-width:768px){ .feature{ -webkit-box-align:center; -ms-flex-align:center; align-items:center; padding:80px 0; grid-template-columns:1fr minmax(-webkit-min-content,1fr); grid-template-columns:1fr minmax(min-content,1fr); grid-template-areas:"feature-title feature-img" "feature-text feature-img"; } .feature:nth-child(2n){ grid-template-columns:minmax(-webkit-min-content,1fr) 1fr; grid-template-columns:minmax(min-content,1fr) 1fr; grid-template-areas:"feature-img feature-title " "feature-img feature-text"; } .feature-title{ grid-area:feature-title; -ms-flex-item-align:end; align-self:flex-end; } .feature-img{ grid-area:feature-img; } .feature-text{ grid-area:feature-text; -ms-flex-item-align:start; align-self:flex-start; } } footer {background:#757575; padding:20px;} /* === === ==== === === */ /* === === ==== === === */ /* === === FORM === === */ /* === === ==== === === */ /* === === ==== === === */ form#checkout-form .codzt {display:flex; flex-direction:row; justify-content:center;gap:18px} form#checkout-form .codzt > div {flex: 1 1 300px} .form-group {max-height:65px;} .form-group>label {color:#666;top: 36px;left: 18px;position: relative;background-color: white;padding: 0px 5px 0px 5px;font-size: 14px;transition: 0.2s;pointer-events:none;} .form-group>label sup {color:red;} .form-group.label-animate>label { top: 12px !important; left: 4.5px !important; height:15px; color:#666; } input, textarea {background: #fff;color: #000;font-size: 16px;padding: 9px ;display: block;width:100%;border-radius: 9px;border: 1px solid #c6c6c6;} input:hover, textarea:hover {border-color: #a3c6bf;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;} input:focus, textarea:focus {outline: none;border: 1px solid #a3c6bf;} input:focus ~ .bar:before, textarea:focus ~ .bar:before {width: 320px;} .alertborder {border:1px solid red;} /* === === === === === === == === === === === === === === */ /* === TAB SLIDER ===*/ /* === === === === === === == === === === === === === === */ section#tabslider {display:block;padding-top:0;padding-bottom:60px;width:1170px; max-width:calc(100% - 36px);margin: 0 auto;} section#tabslider h2 {visibility: visible; animation-delay: 0.3s; animation-name: pixFadeUp} #em-tabs #em-tabs-nav { display: flex; align-items: stretch; text-align: left; margin: 60px auto 30px; padding: 0; list-style: none; flex-wrap: wrap; } #em-tabs #em-tabs-nav li { display: flex; margin-right: 18px; text-align: left; line-height: 1;} #em-tabs #em-tabs-nav li:last-child { margin-right: 0;} #em-tabs #em-tabs-nav li a { color: #000; text-decoration: none; cursor: pointer; background: #f5f6f9; box-shadow: none; margin-bottom: 20px; display: flex; align-items: center; padding: 18px 27px; line-height: 24px; border-radius: 4px; } #em-tabs #em-tabs-nav li a svg {margin-right:9px;} #em-tabs #em-tabs-nav li a svg path { fill: #000;} #em-tabs #em-tabs-nav li.active a svg path, #em-tabs #em-tabs-nav li:hover a svg path { fill: #fff;} #em-tabs #em-tabs-nav li.active a, #em-tabs #em-tabs-nav li:hover a { background: linear-gradient(72.47deg, rgb(230, 83, 0) 22.16%, rgba(230, 83, 0, .7) 76.47%) !important; box-shadow: 0 3px 1px -2px rgba(51, 48, 60, .02), 0 2px 2px 0 rgba(0, 0, 0, .014), 0 1px 5px 0 rgba(0, 0, 0, .012) !important; color: #fff !important; } #em-tabs-content { padding: 60px 90px; background: #f5f6f9; border-radius: 18px; box-sizing: border-box; } #em-tabs-content .content { display: flex; flex-wrap: wrap; align-items: center; text-align: center; } #em-tabs-content .content .tabimg { max-width: 540px; box-sizing: border-box; } #em-tabs-content .content .tabimg img { border-radius: 10px; background: transparent !important; box-shadow: none !important; width: 100%; height: auto; vertical-align: middle; border-style: none; } #em-tabs-content .content .tabcnt { font-size: 16px; line-height: 28px; color: #797687; font-weight: 400; flex: 2; text-align: left; padding-left: 100px; } #em-tabs-content .content .tabcnt h3 { font-size: 24px; font-weight: 600; color: #1a133b; margin-bottom: 26px; } #em-tabs-content .content .tabcnt p { margin-bottom: 26px; } @media (max-width: 1169px) { #em-tabs #em-tabs-nav li a svg { display:none;} #em-tabs-content { padding: 60px 18px ; } #em-tabs-content .content { gap:36px; } #em-tabs-content .content .tabimg { max-width: 50%;} #em-tabs-content .content .tabcnt { padding-left: 0; } } @media (max-width: 1050px) { #em-tabs #em-tabs-nav li a { padding: 18px 18px;} #em-tabs-content { padding: 45px 9px ; } #em-tabs-content .content { gap:36px; } } @media (max-width: 768px) { #em-tabs #em-tabs-nav li a { font-size:15px; padding: 9px 9px;} #em-tabs-content { padding: 45px 36px ; } #em-tabs-content .content .tabimg {display:none;} } /* == ===== ==== ===== ===== */ /* == FAQ ==== ===== ===== */ /* == ===== ==== ===== ===== */ .acco{display:flex;flex-direction:column;max-width:750px;min-width:320px;margin:50px auto}.acco-item{margin-bottom:18px;border-radius:6px;background:#f8f8fc;box-shadow:0 7px 18px -9px rgb(133,153,162,.2)}.acco-item .acco-item-title{position:relative;margin:0;display:flex;width:100%;cursor:pointer;justify-content:space-between;flex-direction:row-reverse;box-sizing:border-box;align-items:center;padding:1em 1.5em;color:var(--orange)}.acco-item .acco-item-title:hover{color:#0091ae}.acco-item .acco-item-desc{display:none;border-top:1px dashed #03b5d2;padding:10px 20px 20px;box-sizing:border-box}.acco-item input[type=checkbox]{position:absolute;height:0;width:0;opacity:0}.acco-item input[type=checkbox]:checked~.acco-item-desc{display:block;transition:.2s linear}.acco-item input[type=checkbox]:checked~.acco-item-title .icon:after{display:inline-block;height:22px;width:22px;text-align:center;line-height:20px;border-radius:22px;border:1px solid #03b5d2;content:"-";color:#03b5d2;font-size:18px}.acco-item input[type=checkbox]~.acco-item-title .icon:after{display:inline-block;text-align:center;height:22px;width:22px;line-height:20px;border-radius:22px;border:1px solid #03b5d2;content:"+";color:#03b5d2;font-size:18px}.acco-item:first-child{margin-top:0}.acco-item .icon{margin-left:14px} /*==== ===== ===== ====== ====== ====== */ /*==== ===== ===== ====== ACCORDION */ /*==== ===== ===== ====== ====== ====== */ .accordion-item { background-color: #fff; border: 1px solid #e0e2ea; border-radius: 6px;} .accordion-item:not(:last-child) { margin-bottom: 10px; } @media(min-width: 992px) { .accordion-item:not(:last-child) { margin-bottom: 20px;}} .accordion-item-header { position: relative; font-size: 20px; font-weight: 500; line-height: 1.4; padding: 16px 40px 16px 20px; margin: 0 !important; transition: 200ms; background-color: #fcfcfd; color: var(--color-secondary); user-select: none; border-radius: 6px; transition: 300ms ease-in; cursor: pointer; } .accordion-item-header::after { content: ""; display: inline-block; width: 27px; height: 27px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Echevron-right%3C/title%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: 150ms;} .accordion-item-header:hover { color: var(--color-primary);} .accordion-item-header.is-active { color: var(--color-primary); background-color: #eff1f6; border-radius: 6px 6px 0 0;} .accordion-item-header.is-active::after { transform: translateY(-50%) rotate(-90deg);} .accordion-item-header .tooltip-wrap.tooltip-icon { position: relative; font-size: 16px; top: 1px; margin-left: 8px; } .accordion-item-body { overflow: hidden; display:none; } .accordion-item-body-content { padding: 16px; border-top: 1px solid #e0e2ea;} /*==== ===== ===== ====== ====== ====== */ /*==== ===== ===== ====== TOOLTIP */ /*==== ===== ===== ====== ====== ====== */ .tooltip { position: relative; display: inline-block; cursor: pointer; vertical-align: super; } .tooltip .tooltiptext {visibility: hidden; width: 140px; background-color: #555; color: #fff; font-size:14px; font-weight:normal; text-align: center; border-radius: 5px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -70px;opacity: 0; transition: opacity 0.3s;} .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltip-icon { display: inline-block; width: 16px; height: 16px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: contain; }