:root {  --font-heading: 'Boogaloo', serif; --font-family: 'NotoSans', sans-serif;  --blue-rgb: 4,18,66; --orange-rgb: 239,167,49; --green-rgb: 161,230,0; --white-rgb: 255,255,255; --error: #a63b3b;  --bricks-color-primary: var(--orange); --bricks-color-secondary: var(--white);  --page-width: 2048px; --header-height: 101px; --header-height-mobile: 66px; --gap: 1rem; --section-padding-y: 5rem; --slider-arrow-size: 2.5rem; --border-width: 0.25rem; --border-radius: 1.5rem; --box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); --width-2: calc(50% - var(--gap) / 2); --width-3: calc(33.33% - var(--gap) / 1.5); --width-4: calc(25% - var(--gap) / 1.25);  --transition-duration: 0.35s; --transition: ease-out var(--transition-duration); } @media (max-width: 991px) { :root { --header-height: var(--header-height-mobile); --section-padding-y: 3.5rem; } } @media (max-width: 478px) { :root { --section-padding-y: 2rem; } }  @media (max-width: 600px) { body.bricks-is-frontend.admin-bar #brx-header.sticky.scrolling { top: 0; } }  html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); } html, body { font-family: var(--font-family); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--blue); } body { background-color: var(--white); overflow-x: clip; } ::selection { background-color: var(--green); color: var(--blue); } .hidden, [hidden] { display: none !important; opacity: 0; visibility: hidden; } body.bricks-is-frontend :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 1.5rem; font-family: var(--font-heading); font-weight: 700; line-height: normal; text-transform: uppercase; text-wrap: balance; } h1, .h1 { font-size: 4rem; font-weight: 700; } h2, .h2 { font-size: 3rem; } h3, .h3 { font-size: 2rem; } h4, .h4 { font-size: 1.5rem; } h5, .h5 { font-size: 1.25rem; } h6, .h6 { font-size: 1.1rem; } :where(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6) strong { color: var(--orange); } .bg--blue :where(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6) strong { color: var(--green); } @media (max-width: 991px) { h1, .h1 { font-size: 3rem; } h2, .h2 { font-size: 2.5rem; } } @media (max-width: 767px) { h1, .h1 { font-size: 2.5rem; } h2, .h2 { font-size: 2.25rem; } h3, .h3 { font-size: 1.75rem; } } b, strong { font-weight: 600; } a, a.brxe-text-link .text, a.brxe-text-link .icon, .bricks-button { transition: var(--transition); } .brxe-text a:not(.bricks-button), .brxe-text-basic a:not(.bricks-button), :where(p, ul, ol) a:not(.bricks-button) { text-decoration: underline; color: inherit; } a.brxe-text-link .icon { width: 1.75em; height: 1.75em; border-radius: 50%; background-color: var(--blue-light); padding: 0.5em; font-size: 1rem; color: var(--blue); } a.brxe-text-link .icon path { fill: currentColor; } .brxe-text a:not(.bricks-button):is(:hover, :focus), a.brxe-text-link:is(:hover, :focus) text, a:not(.bricks-button):is(:hover, :focus) { color: var(--orange); } a.brxe-text-link:is(:hover, :focus) .icon { background-color: var(--green); } .dsgvo-reference { font-size: 0.8rem; }  main :where(ul, ol) { padding-left: 1.25em; text-align: left; } main :where(ul, ol) ::marker { color: var(--orange); } main :where(ul, ol) li:not(:last-child) { margin-bottom: 0.5em; } main ul { padding-left: 1.75em; list-style: none; } main ul li { position: relative; } main ul li::before { content: ""; position: absolute; top: 0.1em; right: calc(100% + 0.5em); display: block; width: 1.25em; height: 1.25em; border: 0.125em solid var(--blue); border-radius: 50%; background-image: url('/wp-content/uploads/tennis-ball-pattern.webp'); background-repeat: no-repeat; background-size: 100%; background-position: top left; background-color: var(--green); }  section { padding: var(--section-padding-y) 1rem; } section section { padding: 0; } .brxe-container { align-items: center; } .brxe-container.container--wide { width: 1200px; } .brxe-container.container--left { align-items: flex-start; } header + main, header + .hero { margin-top: var(--header-height); } .hero, .banner { width: 100%; max-width: var(--page-width); } .text--left { text-align: left; } .text--center { text-align: center; } .text--wide { width: 90ch; } .text--medium { width: 83ch; } .text--narrow { width: 64ch; } :where(figure, img).no-border-radius, a.no-border-radius :where(figure, img) { border-radius: 0; } :where(figure, img).no-box-shadow, a.no-box-shadow :where(figure, img) { box-shadow: none; }  .section--skewed { padding-top: 6rem; clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); }  .font--blue { color: var(--blue); } .font--orange { color: var(--orange); } .font--green { color: var(--green); }  p { margin-bottom: 1.2em; } p:last-of-type { margin-bottom: 0; } main :where(ul, ol) { margin: 1.2em 0; } .brxe-text :where(ul, ol):first-child { margin-top: 0; } .brxe-text :where(ul, ol):last-child { margin-bottom: 0; } .brxe-text :where(ul, ol):only-child { margin: 0; } .brxe-text + :where(h2, h3, h4, h5, h6), :where(p, ul, ol) + :where(h2, h3, h4, h5, h6) { margin-top: 1.25em; } :where(p, ul, ol, .brxe-text, .brxe-text-basic) + :where(.button-wrapper, .bricks-button) { margin-top: 2rem; } .no-margin-bottom { margin-bottom: 0; }  header { height: var(--header-height); padding: 0.5rem 1rem; box-shadow: var(--box-shadow); background-color: var(--white); color: var(--blue);  content-visibility: visible !important; } @media (max-width: 991px) { header { padding-top: 0.25rem; padding-bottom: 0.25rem; } }  div.brxe-nav-menu .bricks-nav-menu a, div.brxe-nav-menu .bricks-mobile-menu-wrapper a, div.brxe-nav-menu .bricks-nav-menu .sub-menu a { color: inherit; line-height: normal; text-decoration: none; } header .brxe-nav-menu a:is(:hover, :focus) { background-color: var(--blue-light); color: var(--blue); } header .brxe-nav-menu a[aria-current="page"] { background-color: var(--blue); color: var(--white); } #brxe-ouhala .bricks-nav-menu { align-items: center; }  :where(header, footer) .brx-submenu-toggle.icon-right button { width: 1rem; }  .bricks-mobile-menu { padding: var(--header-height) 0 1.5rem; }  footer .brxe-nav-menu a:is(:hover, :focus) { color: var(--orange); } #menu-footer-service li:not(:first-child) { margin-left: 1em; padding-left: 1em; border-left: 1px solid var(--white); } footer .brxe-nav-menu a[aria-current="page"] { color: var(--green); }  .bricks-button { position: relative; padding: 0.75rem 1.75rem; border: 0; border-radius: var(--border-radius); font-size: 0.9em; font-weight: 600; line-height: normal; color: var(--white); overflow: hidden; isolation: isolate; cursor: pointer; transition: var(--transition); } .bricks-button svg path, .speciality svg path { fill: currentColor } .bricks-button::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 105%; height: 100%; border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; background-color: var(--green); transform: translateX(-105%); transition: var(--transition); z-index: -1; } .bricks-button.bricks-background-primary { background-color: var(--orange); } .bricks-button.bricks-background-secondary { background-color: var(--blue); color: var(--white); } .bricks-button:is(:hover, :focus), .bricks-button.bricks-background-secondary:is(:hover, :focus) { color: var(--blue); } .bricks-button:is(:hover, :focus):before { transform: translateX(0); } :where(.hero, .banner, .bg--blue) .bricks-button.bricks-background-secondary { border-color: rgba(var(--white-rgb),0.3); background-color: rgba(var(--white-rgb),0.3); }   .split { --gap: 3rem; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: var(--gap); } .split--reversed { flex-direction: row-reverse; } .split--50-50 .split__img-wrapper, .split--50-50 .split__content { width: calc(50% - var(--gap) / 2); } .split--60-40 .split__img-wrapper { width: calc(40% - var(--gap) / 2); } .split--60-40 .split__content { width: calc(60% - var(--gap) / 2); } .split--70-30 .split__img-wrapper { width: calc(30% - var(--gap) / 2); } .split--70-30 .split__content { width: calc(70% - var(--gap) / 2); }  .split .split__img-wrapper img { width: 100%; height: 100%; max-height: 25rem; object-fit: cover; object-position: center center; } @media (max-width: 767px) { .split .split__img-wrapper, .split .split__content { width: 100%; } .split .split__img-wrapper { max-width: 45rem; max-height: 25rem; } }  .hero :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) { text-transform: none; }  .banner { position: relative; overflow: hidden; isolation: isolate; }  main svg, .box__icon { box-sizing: content-box; }  .box { box-shadow: var(--box-shadow); overflow: hidden; }  .brxe-slider-nested.slider .splide__track { overflow: visible; } .brxe-slider-nested.slider .slide, .brxe-slider-nested.slider .slide > *:not(.bricks-button) { position: relative; } .brxe-slider-nested.slider .slide > * { z-index: 5; } .brxe-slider-nested.slider .slide:before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 10%, transparent 50%); z-index: 2; } .brxe-slider-nested.slider .slide .bricks-button { padding: 2em; border-radius: 50%; background-color: var(--white); color: var(--blue); } .brxe-slider-nested.slider .slide__button:is(:hover, :focus) { background-color: var(--orange); color: var(--white); } .brxe-slider-nested.slider .slide__button svg { height: 0.9em; }  .brxe-form { --_form-padding: 0.5rem; --_checkbox-size: 1.25rem; } .brxe-form ul { margin: 0.5em 0 1em; padding-left: 0; } .brxe-form ul li::before { display: none; } .brxe-form .form-group > :where(label, .label) { padding-top: 0.25em; padding-left: 1em; font-size: 0.85rem; } .brxe-form input:not([type="radio"], [type="checkbox"]), .brxe-form select, .brxe-form textarea { padding: 0.75rem 1.25rem; border-radius: var(--border-radius); background-color: var(--white); box-shadow: var(--box-shadow); line-height: normal; color: var(--blue); } .brxe-form input:not([type="radio"], [type="checkbox"]), .brxe-form select, .brxe-form textarea, .contact-form .options-wrapper li input[type="checkbox"] { border: none; border-top: var(--border-width) solid var(--orange); } .brxe-form input:not([required]), .brxe-form select:not([required]), .brxe-form textarea:not([required]) { border-top-color: var(--green); } .brxe-form input:not([type="radio"], [type="checkbox"])::placeholder, .brxe-form select::placeholder, .brxe-form textarea::placeholder { color: transparent; } .brxe-form textarea { min-height: 10rem; max-height: 25rem; overflow: hidden; resize: vertical; }  .brxe-form select, .brxe-form select option, .variations_form select, .variations_form select option { font-family: var(--font-family); }  .contact-form .options-wrapper li { display: flex; flex-flow: row nowrap; align-items: baseline; column-gap: 0.5rem; } .contact-form .options-wrapper li input[type="checkbox"] { width: var(--_checkbox-size); min-width: var(--_checkbox-size); height: var(--_checkbox-size); padding: 0; border-radius: 0.25em; box-shadow: var(--box-shadow); background-repeat: no-repeat; background-size: 1em; background-position: center; background-color: var(--white); appearance: none; transition: var(--transition); } .contact-form .options-wrapper li input[type="checkbox"]:checked { background-color: var(--green); } .contact-form .options-wrapper li label { max-width: 75ch; font-size: 0.85rem; } .contact-form .options-wrapper li label strong { display: block; margin-bottom: 0.25em; font-size: 1rem; } .brxe-form .submit-button-wrapper { padding: 0 var(--_form-padding); }  footer { background-color: var(--blue); color: var(--white); } footer svg.logo :where(.color-1, .color-2) { fill: var(--blue-light); } footer .hidden-footer { display: none; opacity: 0; visibility: hidden; } footer .brxe-text a { text-decoration: none!important; }   .card { background: var(--white); border-radius: 16px; border-bottom: var(--border-width) solid var(--green); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .card__icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--blue-light); border-radius: 14px; color: var(--orange); font-size: 24px; margin-bottom: 28px; }  .card--highlight { position: relative; background: var(--blue); border-bottom-color: var(--orange); box-shadow: 0 12px 30px rgba(26, 35, 82, 0.3); color: var(--white); overflow: hidden; isolation: isolate; } .card--highlight::after { content: ""; position: absolute; top: -2.5rem; right: -2.5rem; width: 10rem; height: 10rem; border-radius: 50%; background: rgba(255, 255, 255, 0.04); z-index: -1; } .card--highlight .card__icon { position: relative; background: rgba(255, 255, 255, 0.08); color: var(--green); z-index: 1; } .card--highlight .card__text { color: var(--blue-light); }  .section--steps { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); } .steps, .cards { align-items: stretch!important; } .steps { counter-reset: step; } .step { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem 2rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--border-radius); background-color: rgba(255, 255, 255, 0.03); text-align: center; transition: var(--transition); } .step:is(:hover, :focus-within) { border-color: rgba(255, 255, 255, 0.18); background-color: rgba(255, 255, 255, 0.05); }  .step::before { content: counter(step); counter-increment: step; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1.5rem; border-radius: 50%; background-color: var(--green); font-family: var(--font-family); font-weight: 700; color: var(--blue); } .step__title { margin-bottom: 0.5rem; font-size: 1.15rem; color: var(--white); } .step__text { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); }  .trainer { border-top: var(--border-width) solid var(--green); border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .trainer--detail:nth-child(even) { border-top-color: var(--orange); } .trainer__avatar { box-shadow: none; } .trainer__name { margin-bottom: 1rem; font-size: 1.15rem; color: var(--blue); } .trainer__text { margin-bottom: 2rem; font-size: 0.95rem; color: var(--blue-muted); } .trainer .bricks-button { margin-top: auto; } .trainer--detail .speciality { flex-direction: column; } .trainer--detail .speciality .icon, .trainer--detail .speciality .icon svg { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; color: var(--orange); box-sizing: content-box; } .trainer--detail:nth-child(even) .speciality .icon, .trainer--detail:nth-child(even) .speciality .icon svg { color: var(--green); } .trainer--detail .speciality .icon { padding: 0.5em; border-radius: 50%; background-color: var(--blue-light); }  .image-frame { padding: 0.75rem; border: 5px solid var(--white);  border-radius: 1.5rem; background-color: var(--blue); box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.22); transform: rotate(3deg); transition: var(--transition); animation: imagewobble 3s infinite; } .image-frame img { display: block; width: 100%; border-radius: 1rem; box-shadow: none; } @media (max-width: 767px) { .image-frame { transform: rotate(0deg); } } @keyframes imagewobble { 0% { transform: rotate(3deg); } 25% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } 100% { transform: rotate(3deg); } }  .logo-frame { padding: 0.85rem; border-radius: var(--border-radius); background-color: var(--white); box-shadow: 0 0 2.5rem rgba(161,230,0,0.5); } .logo-frame img { display: block; width: 100%; border-radius: calc(var(--border-radius) - 0.5rem); box-shadow: none; }  .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .review { display: flex; flex-direction: column; padding: 2rem; border-radius: var(--border-radius); background-color: var(--blue); color: var(--white); } .review__stars { margin-bottom: 1.25rem; color: var(--orange); font-size: 1.1rem; letter-spacing: 0.15em; } .review__text { margin-bottom: 1.75rem; font-size: 0.95rem; font-style: italic; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }  .review__author { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; } .review__avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; box-shadow: none; } .review__name { font-weight: 700; line-height: 1.2; } .review__role { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); } @media (max-width: 991px) { .reviews { grid-template-columns: 1fr; max-width: 32rem; margin: 0 auto; } }  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; align-items: start; column-gap: 2.5rem; row-gap: 2.5rem; } .footer__logo { box-shadow: none; } .footer__col h3, .footer__col .h4 { margin-bottom: 1.25rem; font-family: var(--font-family); font-size: 1.05rem; color: var(--white); } .footer__col ul { padding-left: 0; list-style: none; } .footer__col ul li { margin-bottom: 0.6rem; } .footer__col ul li::before { display: none; } .footer__col a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } footer a:is(:hover, :focus) { color: var(--orange); } @media (max-width: 991px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } }