:root {
--lila: #fa6955;
--button-hover: #ff8271;
--light-button-hover: #ffeded;
--dark-blue: rgb(5,20,60);
--small-font-size: 1rem;
--huge-font-size: 5.5rem;
--logo-width: 290px;
--logo-height: 128px;
--button-margin: 0px;
}
@media only screen and (min-width: 768px) {
:root {
--logo-width: 325px;
--logo-height: 144px;
--button-margin: 125px;
}
}
a {
transition: ease all 0.3s;
}
a.button {
display: flex;
justify-content: center;
align-items: center;
color: var(--lila);
padding: 13px 0;
width: 100%;
max-width: 248px;
background: var(--lila);
color: #fff;
border-radius: 24px;
border: 1px solid var(--lila);
font-size: 1rem;
line-height: 22px;
font-weight: 600;
transition: ease all 0.3s;
}
a.button:hover {
background-color: var(--button-hover);
text-decoration: none;
}
.studio section.nav {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
}
.mod-25 {
background: var(--dark-blue);
}
.mod-18 ul {
position: relative;
top: initial;
margin: var(--button-margin) auto;
}
.mod-18 ul li a {
font-weight: 600;
}
.mod-18 h3 {
width: 75%;
}
.header .logo {
margin-top: 10px;
width: var(--logo-width);
max-width: 100%;
height: var(--logo-height);
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
background-size: contain;
background-repeat: no-repeat;
}
.header > .container > .row.A > .col.AA > a {
display: flex;
justify-content: center;
align-items: center;
}
.mod-18.A {
padding: 320px 0 0px 0;
}
@media (max-width: 575.98px), (min-width: 576px) and (max-width: 767.98px) and (orientation: portrait) {
.mod-18.A {
padding: 270px 0 0px 0;
}
}
.mod-18 li:first-of-type a:hover,
.mod-25 .BACA a:first-of-type:hover {
background: var(--button-hover);
border-color: var(--button-hover);
}
section.carousel {
overflow: hidden;
}
.owl-carousel .owl-stage-outer {
overflow: visible;
}
/* New Module h. Mitgliedschaft (Slider) */
section.price-carousel {
overflow: hidden;
background-color: var(--dark-blue);
padding: 90px 0px 60px 0px;
h2 {
padding: 0 0 30px 0px;
}
.container *, .container h2, .container p {
color: #fff;
}
}
section.price-carousel .item.option {
width: 100%;
position: relative;
border: 1px solid var(--gold);
border-radius: 100vw;
height: initial;
transition: background-color 0.3s ease;
}
section.price-carousel .option:hover {
border: 1px solid transparent;
background-color: #fff;
* {
color: var(--gold);
}
}
section.price-carousel .option .option-header {
width: calc(100% + 2px);
height: auto;
aspect-ratio: 1/1;
border: 1px solid var(--gold);
border-radius: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
margin: -1px -1px 0 -1px;
}
section.price-carousel .option .option-header .name {
font-size: var(--small-font-size);
}
section.price-carousel .option .option-header .month {
font-size: var(--huge-font-size);
line-height: calc(var(--huge-font-size) + 0.1rem);
}
section.price-carousel .option .option-header .price {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
font-size: 2.4rem;
line-height: 1.4rem;
}
section.price-carousel .option .option-header .price span {
font-size: var(--small-font-size);
}
section.price-carousel .option .option-body,
section.price-carousel .option .option-footer {
padding: 40px 16% 0;
}
section.price-carousel .option .option-body ul {
padding-left: 0;
list-style: none;
}
section.price-carousel .option .option-body ul li {
margin-left: 0;
display: grid;
grid-template-columns: 15px auto;
gap: 30px;
margin-bottom: 1rem;
}
section.price-carousel .option .option-body ul li::before {
content: "";
display: inline-block;
width: 15px;
height: 20px;
mask-image: url('data:image/svg+xml,');
background-color: #fff;
mask-size: contain;
mask-position: center center;
mask-repeat: no-repeat;
}
section.price-carousel .option:hover .option-body ul li::before {
background-color: var(--gold);
}
section.price-carousel .option .option-footer {
padding: 20px 16% 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 22px;
}
section.price-carousel .option .option-footer a.button {
background-color: transparent;
}
section.price-carousel .option.option:hover .option-footer a.button {
transition: ease all 0.3s;
background-color: var(--lila);
color: #fff;
}
section.price-carousel .option.option:hover .option-footer a.button:hover {
background-color: var(--button-hover);
}
section.price-carousel .option.option .option-footer a.link {
font-size: 1rem;
}
.call-to-action {
display: flex;
justify-content: center;
margin-bottom: 56px;
}