@font-face { font-family: 'K2D'; src: url('/fonts/k2d/K2D-Regular.ttf'); }

/* css clean up */

*{
    /* all: revert; */

	font-family: 'K2D', sans-serif; font-weight: 300;

	box-sizing: border-box;
	margin: 0;
	padding: 0;
    text-decoration: none;
		
		/*
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
		*/
		
    /*border: 1px solid red;*/

    word-wrap: break-word;
}

:root {

    /* colors */
    --background: #000000;
    --background-bg: #ffffff;
    --background-layer: #eba40c5d;
    --background-layer-2: #775b2d;
    --accent: #ffb300;
    --text: #ffffff;
    --text-drk: #ffffff;
    --layer: #a7a7a7;
    --layer-2: #ffe6e6;
    --layer-3: #e1bd79;
    --layer-2-transparent: #ffa60061;
    --layer-2-transparent-2: #ffae0071;
    --layer-3-transparent: #4a2b2b71;
    
}

.header-wrapper {
    /* display: none; */
}

textarea{
    resize: vertical;
}

body {
    /* background-color: var(--background-bg); */
    /* background-color: #faf9eb; */
    background-color: #1d1b1f;
}

.no-phone {
    display: block;
}
.no-desk {
    display: none;
}

/* components */

p {
    color: var(--background);
}
h2 {
    margin-bottom: .5rem;
}
h3 {
    color: var(--background);
}


h1, h2, h3, h4, h5, h6, p, a {
    cursor: default;
    color: #ffffff;
}

.text-center {
	text-align: center;
}
.pointer *{
	cursor: pointer;
}

#loader.htmx-indicator {
	display:none;
}
#loader.htmx-request {
  display:block;
  animation: load 8s linear 1;
}

.inpextra{
	position: absolute;
	top: 9999vh;
	left: 9999vw;
}

#loader {
	display:block;
	position: fixed;
	z-index: 99;
	left: 0;
	top: 0;
	margin: 0;
	width: 0;
	background: var(--accent);
	height: 2px;
/* 	opacity: 1; */
/* 	animation: load 8s linear 1; */
}
@keyframes load {
  0% { width: 0; }
  5% { width: 0; }
  20% { width: 90%; }
  100% { width: 100%; }
}

.main-nav {
    position: fixed;
    top: 1rem; right: 4vw;
    z-index: 999;
}

#menyAvPaa {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 0;
    position: absolute;
}

#burger {
    position: absolute;
    z-index: 99;
    top: .8rem; right: .5rem;
    /* width: 1.3rem; height: 1rem; */
    width: 1.8rem;
    aspect-ratio: 13 / 10;
    cursor: pointer;
    opacity: .7;
    transition: scale .2s ease, opacity .2s ease;

    /* background-color: #1414143b; */
}
#burger:hover {
    opacity: 1;
    /* scale: 1.05; */
}

#burger > div {
    width: 100%;
    position: absolute;
    border: 1px solid white;
    transition: translate .3s ease, rotate .3s ease, opacity .2s ease, top .3s ease, bottom .3s ease;
}
#burger > div:nth-child(2) {
    top: 50%;
    translate: 0 -50%;
    transition-delay: .1s;
}
#burger > div:nth-child(3) {
    bottom: 0;
}

.main-nav:has(#menyAvPaa:checked) #burger > div:nth-child(2) {
    opacity: 0;
    transition: opacity .2s ease;
    transition-delay: 0;
}

.main-nav:has(#menyAvPaa:checked) #burger > div:nth-child(1) {
    top: 50%;
    translate: 0 -50%;
    rotate: 45deg;
}
.main-nav:has(#menyAvPaa:checked) #burger > div:nth-child(3) {
    bottom: 50%;
    translate: 0 50%;
    rotate: -45deg;
}


.nav > ul {
    display: grid;
    gap: .2rem;
}
.nav {
    opacity: 0;
    padding: 0 1.5rem 0 1rem;
    max-height: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: #28282871;
    backdrop-filter: blur(40px);
    border-radius: .6rem;
    transition: padding .2s ease, opacity .3s ease, max-height .2s ease;
    box-shadow: 0 0 15px 0 #000000c9;
}
.main-nav:has(#menyAvPaa:checked) .nav {
    opacity: 1;
    pointer-events: auto;
    /* height: 13.8rem; */
    /* max-height: 15rem; */
    max-height: 25rem;
    /* padding: 1.8rem .5rem 1rem .5rem; */
    padding: 2.5rem 1.5rem 1rem 1rem;
    transition: opacity 0 linear, height .3s ease, padding .3s ease;
}

.nav li {
    list-style: none;
    min-width: 10rem;
}
.nav li a {
    cursor: pointer;
		display: block;
		padding: .2rem .5rem .25rem .5rem;
    border-radius: .4rem;
    
    transition: background-color .2s ease;
}
.nav li a:hover {
    background-color: #18181885;
}



#titles {
    position: absolute;
    width: calc(100vw - 8vw - 12rem);
    max-width: 30rem;
    top: calc(4vw + 4rem); left: calc(4vw + 6rem);
    z-index: 40;
    font-size: 3rem;
}
#titles > div {
    position: absolute;
    display: flex;
    flex-direction: column;
}
#titles > div > * {
    color: white;
    text-shadow: 0 0 22px #ffffff86;
}
#titles > div > h2 {
    font-size: 2rem;
    margin-left: .3rem;
    text-shadow: 0 0 16px #ffffff86;
}
.disabled {
    display: none !important;
}

.visibility-wrapper {
    position: relative;
    width: 92vw; height: calc(100dvh - 6rem - 6rem);
    max-width: 1200px;
    margin: 6rem 4vw 3rem 4vw;
    overflow: hidden;
    border-radius: 3rem;
}

.head-wrapper {
    position: absolute;
    top: -6rem; left: 0;
    width: 96vw; height: 100dvh;
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
    overscroll-behavior: none;

    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
}
.head-wrapper::-webkit-scrollbar {
    display: none;
    visibility: hidden;
    opacity: 0;
    scrollbar-width: none;
}

.visibility-wrapper.overlay .head-wrapper {
    left: 0;
}

.head-section {
    height: 100%;
    flex: 0 0 100vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    scroll-snap-align: start;
}
.squash-head-outer {
    position: absolute;
    top: 0; left: 0;
    width: 92vw; height: calc(100dvh - 8vw);
    max-width: 1200px;
    margin: 4vw;
    z-index: 100;
}
.squash-head {
    pointer-events: none;
    position: absolute;
    top: -4vw; left: -6vw;
    width: 100vw; height: 100dvh;
    background-image: url(/images/squash-head.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.head-section.overlay {
    display: none;
}
  
.head-section.overlay.visible {
    display: block;
}

#sports {
    all: unset;
    position: absolute;
    z-index: 30;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    gap: 5rem;
    top: calc(100% - 6rem - 4rem);
}
#sports a {
    all: unset;
    cursor: pointer;
    font-size: 1.5rem;
    color: white;
    filter: drop-shadow(0 0 30px white);
    transition: opacity .2s ease, scale .2s ease, text-decoration-thickness .2s ease;
    text-shadow: 0 0 12px #ffffff86;
    text-decoration-thickness: 0;
}
#sports a:not(.active) {
    opacity: .6;
}
#sports a:hover {
    scale: 1.05;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    opacity: 1;
}
.visibility-wrapper.overlay {
    position: absolute;
    top: 0; left: 0;
    overflow: visible;
    z-index: 100;
    pointer-events: none;
}


.main-wrapper {
    position: relative;
    width: 92vw;
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.member-select-wrapper {
    position: relative;
    flex: 1;
    min-width: 35rem;
    height: 20rem;
    overflow: hidden;
    border-radius: 3rem;
    box-shadow: inset 0 0 40px 0 #000000a0;
    padding: 1.8rem 2.2rem 2rem 2.2rem;
    background: linear-gradient(#000000a8, #00000075 4rem, #00000026 7rem, #00000000 9rem);

    display: grid;
    grid-template-rows: 1.8rem 2rem 3rem auto;
}
.member-select-wrapper :is(h4, h5, p) {
    text-shadow: 0 0 40px #000000;
}
.member-select-price {
    font-size: 2rem;
    font-weight: 400;
}
.price-aktion{
	display: block;
	font-size: 1.2rem;
	transform: rotate(45deg);
	position: absolute;
	right: -5.8rem;
	top: 3rem;
	width: 20rem;
	text-align: center;
	padding: 0.5rem 1rem;
	border-radius: .3rem;
	background-color: #dd3333aa;
}

.member-select-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: calc(100% + 30vh);
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.member-select-booking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    border-radius: 1rem;
    align-self: end;
    max-width: none;
    outline: none;
    color: #000;
    border: none;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 2px solid #898989;
    border-right: 2px solid #898989;
    cursor: pointer;
    padding: unset;

    font-size: .9rem;
    padding-bottom: 0.1rem;
    text-decoration: none;

    background: linear-gradient(
        45deg,
        #999 5%,
        #fff 10%,
        #b3b3b3 30%,
        #ddd 50%,
        #a2a2a2 70%,
        #f0f0f0 80%,
        #ccc 95%
    );
    text-shadow: 1px 1px 2px #ffffff80;
    box-shadow: 0 4px 8px 0px #0000004d;

    transition: scale .2s ease, filter .2s ease;
}
.member-select-booking:hover {
    scale: .95;
    filter: brightness(.7);
    opacity: 1;
}

.member-select-wrapper.gold .member-select-booking {
    border-top: 2px solid #ffe185;
    border-left: 2px solid #ffe185;
    border-bottom: 2px solid #8d733d;
    border-right: 2px solid #8d733d;
    background: linear-gradient(
        45deg,
        #987431 5%,
        #ffef9f 10%,
        #c9963c 30%,
        #ecbc4d 50%,
        #bd8e17 70%,
        #ffe18f 80%,
        #aa7526 95%
    );
}

.member-select-wrapper.diamond .member-select-booking {
    border-top: 2px solid #85c8ff;
    border-left: 2px solid #85c8ff;
    border-bottom: 2px solid #3d758d;
    border-right: 2px solid #3d758d;
    background: linear-gradient(
        45deg,
        #317d98 5%,
        #9fdfff 10%,
        #3c9fc9 30%,
        #97d9ff 50%,
        #3a9ec5 70%,
        #8fe1ff 80%,
        #2690aa 95%
    );
}

.member-select-wrapper.violet .member-select-booking {
    border-top: 2px solid #e385ff;
    border-left: 2px solid #e385ff;
    border-bottom: 2px solid #5d207c;
    border-right: 2px solid #5d207c;
    background: linear-gradient(
        45deg,
        #773198 5%,
        #e49fff 10%,
        #af3cc9 30%,
        #ec97ff 50%,
        #a53ac5 70%,
        #e18fff 80%,
        #8926aa 95%
    );
}


.member-select-wrapper.gold .member-select-bg {
    background-image: url(/images/tiers/gold.webp);
}
.member-select-wrapper.silver .member-select-bg {
    background-image: url(/images/tiers/silver.webp);
}
.member-select-wrapper.diamond .member-select-bg {
    background-image: url(/images/tiers/diamond.webp);
}
.member-select-wrapper.violet .member-select-bg {
    background-image: url(/images/tiers/violet.webp);
}

.member-select-tier {
    font-size: 1.3rem;
}

.member-select-tier-description {
    opacity: .8;
    margin-top: .2rem;
    margin-bottom: .2rem;
    font-weight: 400;
    display: flex;
    gap: .5rem;
}
.member-select-tier-description span {
    background-color: #52525287;
    backdrop-filter: blur(10px);
    padding: .1rem .5rem 1.5rem .5rem;
    border-radius: .2rem;
    border: 1px solid #ffffff3d;
}

.member-select-price span {
    font-weight: 400;
    font-size: 1rem;
}

.member-select-wrapper.gold *:not(.member-select-booking) {
    color: #ffd87e;
}
.member-select-wrapper.silver *:not(.member-select-booking) {
    color: #f2f2f2;
}
.member-select-wrapper.diamond *:not(.member-select-booking) {
    color: #98e2ff;
}
.member-select-wrapper.violet *:not(.member-select-booking) {
    color: #e998ff;
}


.start-nav {
    position: absolute;
    border-radius: .8rem .8rem 0 0;
    overflow: hidden;
    top: calc(6rem + 3.3rem); right: calc(4vw + 1px);
    translate: 0 -100%;
    display: flex;
    box-shadow: 0 0 35px -1px #1D6AF4;
    border: .5px solid #acc5f3;
    transition: background-color .2s ease, border .2s ease, box-shadow .2s ease;
}
.start-nav:hover {
    box-shadow: 0 0 20px -2px #538af0;
}
.start-nav a:first-child {
    border-radius: .8rem 0 0 0;
}
.start-nav a:last-child {
    border-radius: 0 .8rem 0 0;
}
.start-nav a {
    padding: .5rem 1.5rem;
    background-color: #C6BBAC;
    background-color: #1D6AF4;
    border: .5px solid #acc5f3;
    color: #ffffff;
    font-size: 1.1rem;
    height: 5.7rem;

    cursor: pointer;
    transition: background-color .2s ease, border .2s ease;
}
.start-nav a:hover {
    background-color: #538af0;
    border: .5px solid #538af0;
}


.member-select-wrapper.highlight {
    box-shadow: 0 0 20px 0 #ffffff;
}
.member-select-wrapper.grey.highlight {
    box-shadow: 0 0 20px 0 #ffffff;
}
.member-select-wrapper.sliver.highlight {
    box-shadow: 0 0 20px 0 #ffffff;
}
.member-select-wrapper.gold.highlight {
    box-shadow: 0 0 20px 0 #ffa600;
}
.member-select-wrapper.violet.highlight {
    box-shadow: 0 0 20px 0 #cc00ff;
}
.member-select-wrapper.diamond.highlight {
    box-shadow: 0 0 20px 0 #00aaff;
}

.parking-pin {
    position: absolute;
    aspect-ratio: 1300 / 1830;
    width: 4vw;
    /* z-index: 100; */
    background-image: url(/images/maps/parking.svg);
    background-position: center 0%;
    background-size: 115%;
    background-repeat: no-repeat;
    cursor: pointer;
    translate: -50% -50%;
    filter: drop-shadow(0 .2vw .5vw #27272778);

    transition: scale .3s ease, transform .3s ease, filter .3s ease;
}
.parking-pin::after {
    display: block;
    position: absolute;
    content: "";
    left: 0; bottom: 0;
    width: 100%;
    aspect-ratio: 1299.7 / 498.5;
    background-image: url(/images/maps/parking-radius.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    
    transition: scale .3s ease, transform .3s ease;
}
.parking-pin:hover {
    transform: translateY(-1.1vw);
    scale: 1.3;
    filter: drop-shadow(0 .2vw 1vw #0076cb);
}
.parking-pin:hover::after {
    scale: .6;
    transform: translateY(1.3vw);
}

.parking-map {
    position: relative;
    width: 100vw;
    aspect-ratio: 2110 / 1300;
    background-image: url(/images/maps/parking-map.webp);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.parking-image {
    box-sizing: content-box;
    position: absolute;
    top: -4vw; left: 6vw;
    width: 20vw; aspect-ratio: 1146 / 702;
    border-radius: 1vw;
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    z-index: 200;
    outline: .1vw solid white;

    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: opacity .3s ease, filter .3s ease, outline .3s ease, transform .3s ease, background-size .3s ease;
}
.parking-image:hover {
    filter: brightness(.6);
    outline: .3vw solid white;
    /* transform: translate(-.2vw, -.2vw); */
    background-size: 110%;
}
.parking-image::before {
    display: block;
    position: absolute;
    content: "";
    top: -2.5vw; left: -2.5vw;
    width: calc(100% + 5vw); height: calc(100% + 5vw);
}
.parking-image::after {
	display: block;
	position: absolute;
	content: attr(data-title);
	bottom: 0;
	font-size: 1vw;
	color: white;
	text-shadow: 0 0 1vw #000000, 0 0 1vw #000000;
	background-image: linear-gradient(0deg, #000000bd, transparent);
	padding: 2vw 1vw .6vw 1vw;
	border-radius: 0 0 1vw 1vw;
}
.parking-pin:hover .parking-image {
    opacity: 1;
    pointer-events: all;
}
.parking-pin.squash::after {
    background-image: url(/images/maps/squash-radius.svg);
}

#profile_detail {
    display: none;
}


.carusel-logo {
    position: absolute;
    z-index: 50;
    top: calc(4vw + 4.5rem); right: calc(4vw + 6rem);
    width: 9.5rem; aspect-ratio: 1;

    background-image: url(/images/logo.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;    
}

.opening-hours {
    margin: 8rem 0 2rem 0;
    justify-self: center;
    border-radius: 3rem;
    width: 92vw;
    max-width: 1200px;
    overflow: hidden;
    padding: 4rem 4rem 6rem 4rem;
    backdrop-filter: blur(50px);
}
.opening-hours h2 {
    position: relative;
    text-shadow: 0 0 20px #ffffffb9;
}
.opening-hours h2 span:not(.counting-number) {
    position: absolute;
    font-size: 3rem;
    bottom: 2.5rem; left: 18rem;
}
.opening-hours h2 .counting-number {
    display: inline;
    font-size: 13rem;
}

/* media-thin-phone */

@keyframes scroll-left {
    to {
        left: -14rem;
    }
}

.inf-logo-scroll {
    justify-self: center;
    position: relative;
    width: 100%; height: 4rem;
    margin-top: 3rem;
    margin-inline: auto;
    overflow: hidden;
    mask-image: linear-gradient(to right, rgba(0,0,0,0),rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0));
}

.element1 {
    animation-delay: calc(30s / 5 * (5 - 1) * -1);
}
.element2 {
    animation-delay: calc(30s / 5 * (5 - 2) * -1);
}
.element3 {
    animation-delay: calc(30s / 5 * (5 - 3) * -1);
}
.element4 {
    animation-delay: calc(30s / 5 * (5 - 4) * -1);
}
.element5 {
    animation-delay: calc(30s / 5 * (5 - 5) * -1);
}

.scroll-element {
    position: absolute;
    width: 14rem; height: 4rem;
    left: max(calc(14rem * 5), 100%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    animation-name: scroll-left;
    animation-duration: 30s;
    opacity: .7;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.selection::selection {
    color: #ffffff;
    opacity: 1;
    background-color: #FF0000;
}


/* to be styled */

.strength-meter {
  height: 10px;
  width: 100%;
  background-color: #e0e0e033;
  margin-top: 5px;
  border-radius: 3px;
}
.strength-meter-fill {
  height: 100%;
  width: 0;
  background-color: red;
  transition: width 0.3s ease;
}
.strength-meter-fill.weak { background-color: red; }
.strength-meter-fill.medium { background-color: orange; }
.strength-meter-fill.strong { background-color: green; }
.strength-text {
  margin-top: 5px;
  font-size: 0.9em;
  color: var(--akzent);
}
#verification{
	padding: .8rem .9rem .5rem 1.3rem;
	font-size: 2rem;
	letter-spacing: .5rem;
	font-family: monos-pace, sans-serif;
	background-image: linear-gradient(90deg,
    transparent 0%,
    transparent 3.6rem,
    var(--white-500) 3.7rem,
    transparent 3.8rem,
    transparent 5.2rem,
    var(--white-500) 5.3rem,
    transparent 5.4rem,
    transparent 6.8rem,
    var(--white-500) 6.9rem,
    transparent 7rem,
    transparent 8.4rem,
    var(--white-500) 8.5rem,
    transparent 8.6rem,
    transparent 10rem,
    var(--white-500) 10.1rem,
    transparent 10.2rem
  );
}

footer {
    padding: 3rem 4rem;
    margin-top: 5rem;
    background-color: #1D6AF4;
}
.footer-wrap {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "address metanav", "links logos";
}

.nav hr {
    margin-top: .2rem;
    color: transparent;
    margin-left: .25rem;
    width: calc(100% - .5rem);
    border-top-color: #ffffff;
    opacity: .7;
}

button:hover {
    scale: 1.05;
    filter: brightness(.6);
}

button {
    padding: .4rem .6rem;
    color: white;
    border-radius: .4rem;
    max-width: 10rem;
    border: 1px solid #ad7c12;
    cursor: pointer;
    font-size: 1rem;
    background-color: #664a0d7a;
    transition: scale .2s ease, filter .2s ease;
}

.carousel-button {
    padding: .5rem 1.2rem;
    font-size: 1rem;
    margin-top: 1rem;
    border-radius: .5rem;
    background-color: #1D6AF4;
    width: max-content;
    cursor: pointer;
    transition: scale .2s ease;
    border: .5px solid #acc5f3;
}
.carousel-button:hover {
    scale: 1.05;
}

.subpage-container {
    margin: 5rem auto auto auto;
    padding: 0 4vw 4rem 4vw;
    max-width: 100ch;
}

.subpage-container > * {
    margin-bottom: 1rem;
}
.subpage-title-image {
    position: relative;
    width: 100%; height: 30rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 1rem;
    background-image: url(/images/massage.webp);
}
.subpage-section {
    margin: 2rem 0;
    border-radius: 1rem;
    padding: 1.5rem 1.5rem;
    background-color: #3f3944;
}
.subpage-section.natalia {
    background-color: #353e43;
}
.subpage-section.elena {
    background-color: #44423e;
}



.subpage-section.invis {
    margin: 2rem 0;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
}


.subpage-section ul {
    color: white;
    margin-bottom: 1rem;
}
.subpage-section ul:last-child {
    margin-bottom: 0;
}
.subpage-section > ul > li {
    list-style: none;
    line-height: 1.5rem;
}
.subpage-section > ul > li strong {
    margin-bottom: .5rem;
}
.subpage-section > ul:has(ul) > li {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 2.3rem;
}
.subpage-section ul ul li {
    margin-left: 1.7rem;
    list-style: disc;
    font-weight: normal;
    font-size: 1rem;
}
.subpage-section ul ul {
    margin-top: 1rem;
}
h3 {
    margin-bottom: .7rem;
    opacity: .7;
}

.spacer {
    height: 3rem;
}

h2 {
    font-size: 1.2rem;

}

.subpage-section.kontakt li {
    margin-bottom: 1.5rem;
}
.subpage-section.kontakt li:last-child {
    margin-bottom: 0;
}


.subpage-button {
    padding: .7rem 1.5rem;
    flex: 1 1 0;
    text-align: center;
    min-width: 10rem;
    /* background-color: #1D6AF4; */
    background-color: #C5E8FC;
    /* border: .5px solid #acc5f3; */
    border: 1px solid #1D6AF4;
    color: #1D6AF4;
    border-radius: .5rem;
    transition: opacity .2s ease;
    cursor: pointer;
    box-shadow: 0 0 15px 0px #1D6AF4;
}
.subpage-button.elena {
    color: #C4872A;
    background-color: #FEF7EA;
    border: 1px solid #C4872A;
    box-shadow: 0 0 15px 0px #C4872A;
}

.subpage-button:hover {
    opacity: .7;
}
div:has(> .subpage-button) {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.subpage-section ul li strong {
    color: #6299ff;
    font-weight: bold;
}

.subpage-angebot {
    margin: 1.2rem 0 1.6rem 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.subpage-angebot span {
    border-radius: .5rem;
    padding: .3rem .6rem;
    font-size: .9rem;
    background-color: #59505f;
    border: 1px solid #a99ab3;
}

.opening-hours-mobile {
    display: none;
    position: relative;
    width: 92vw;
    max-width: 1200px;
    margin: auto auto 3rem auto;
    padding: 2rem 2.5rem;
    height: auto;
    border-radius: 3rem;
    overflow: hidden;
}
.opening-hours-mobile span {
    margin-right: 1rem;
    font-size: 5rem;
}
.opening-hours-mobile span:last-child {
    font-size: 2rem;
}

@media only screen and (max-width: 800px) {
    .opening-hours.desk {
        display: none;
    }
    .opening-hours-mobile {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
  .subpage-title-image {
    height: 20rem;
  }
}
@media only screen and (max-width: 500px) {
    .opening-hours-mobile span {
    margin-right: 1rem;
    font-size: 3rem;
    }
    .opening-hours-mobile span:last-child {
        font-size: 1.5rem;
    }
}
@media only screen and (max-width: 450px) {
  .subpage-title-image {
    height: 15rem;
  }
  .member-select-wrapper {
        min-width: 13rem;
    }
}

.googlemaps-link {
    margin: auto auto 1rem auto;
    padding: .5rem 1.4rem;
    border: 1px solid #ffffff;
    border-radius: 10rem;
    cursor: pointer;
    background-color: #1D6AF5;
    text-align: center;
    transition: scale .2s;
}
.googlemaps-link:hover {
    scale: 1.05;
}

.subpage-title-image .angebot-showcase-calls {
    bottom: 1rem;
}



.footer-logo-wrap {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2rem;
}
.footer-logo-wrap a {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
.footer-logo {
    width: 2.5rem;
}
.footer-sport {
    width: 13rem;
}

.news_image{
	float: right; 
	max-width: 8rem; 
	margin-left: 1rem;
}


.content-grid {
    display: grid;
}
.content-grid:has(.center) > *, .content-grid:has(.form-wrap) > * {
    grid-column: 3 / 4;
}

.content-grid:has(.center, #calendar-container) {
    min-height: 100dvh;
}
.content-grid:has(.center), .content-grid:has(.form-wrap) {
    grid-template-columns: auto auto clamp(10rem, 90%, 60rem) auto auto;
    row-gap: 2rem;
}
.content-grid:has(.form-wrap) {
    padding-top: 5rem;
}

.center {  
    position: relative;
    display: flex;
    
    align-self: center;
    justify-self: center;
    gap: 1.5rem;
    height: auto; width: auto;
    
    width: 90%;
/*     max-width: max-content; */
    
    border-radius: 1rem;
    padding: 1.5rem 2.5rem;
    
    color: #ffffff;
    overflow: hidden;
    
    background-color: #664a0d40;
    box-shadow: 0 4px 10px 0 #321E00;

    backdrop-filter: blur(40px);

    border: 1px solid #7d5c15;
}

.center h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.login-flex {
    display: flex;
}

.login-flex form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem 1rem 0;
}

fieldset {
    all: unset;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .4rem;
    width: 100%;
}
body:has(.center) fieldset {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}
body:has(.center) fieldset input {
    width: 12rem;
}

input {
    border-radius: 2rem;
    width: clamp(5rem, 100%, 30rem);
    outline: none;
    /* display: block; */
    border: 1px solid #b19f71;
    background-color: #00000033;
    color: white;
    font-size: .8rem;
    padding: .5rem .9rem .5rem .9rem;
}

input[type=submit] {
    background-color: #90909033;
    border: 1px solid #b19f71;

    text-align: center;
}
fieldset:has(button[type=submit]) {
    width: 100%;
    display: flex;
    justify-content: end;
}

.login-wrap + p {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.login-wrap + p a {
    margin-top: 1rem;
    color: white;
    cursor: pointer;
}
.login-wrap + p a:hover {
    opacity: .7;
}

.login label, .form-two label {
    margin-left: .5rem;
    word-break: keep-all;
}

.login-lock {
    height: 5.3rem;
    filter: brightness(8);
}

.bg-screens {
    /* background-image: url(/images/squash-art-bg.webp); */
    background-image: url(/images/tier-bg.webp);
    background-image: url(/images/person.webp);
    z-index: -3;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* :has(> .form-wrapper) { */
/* .content-grid > div { */
/* .form-two { */
.form-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    
    gap: 1.5rem;
    height: auto; width: auto;

    width: 100%;
    
    border-radius: 1rem;
    padding: 2.5rem 2.5rem;
    
    color: #ffffff;
    overflow: hidden;
    
    background-color: #664a0d40;
    box-shadow: 0 4px 10px 0 #321E00;

    backdrop-filter: blur(40px);
    
    border: 1px solid #7d5c15;
}

.form-two {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.hide {
    display: none;
}
.account-nav {
    position: fixed;
    width: clamp(5rem, calc(90% - 3rem), 60rem);
    display: flex;
    left: 4vw; top: 1rem;
    gap: 1rem;
    z-index: 900;
    flex-wrap: wrap;
}
body:has(#home) .account-nav {
    position: relative;
}
header {
    z-index: 900;
    height: auto;
    position: sticky;
    top: 0;
}

.account-nav li {
    list-style: none;
    background-color: #00000057;
    width: max-content;
/*     padding: .7rem 1.5rem .8rem 1.5rem; */
    border-radius: .5rem;
    backdrop-filter: blur(40px);

    cursor: pointer;
    transition: filter .2s ease;
}
.account-nav li:hover {
    filter: brightness(.6);
}
/* 
.account-nav li * {
    cursor: pointer;
}
 */
.account-nav li a{
	display: inline-block;
	padding: .7rem 1.5rem .8rem 1.5rem;
	cursor: pointer;
}

.account-nav li.highlight {
    background-color: #1D6AF4;
    border: .5px solid #acc5f3;
    box-shadow: 0 0 15px 0px #1D6AF4;
}

.wrap-flex {
    display: flex;
}
.wrap-space-evenly {
    justify-content: space-between;
    gap: 2rem;
}

.status-line {
    position: absolute;
    top: 50%; left: 0;
    width: 100%;
    translate: 0 calc(-50%);
    z-index: -1;
    border: 1px solid #b19f71;
}

#update-nav {
    position: relative;
}

.status-indicator{
    z-index: 10;
    padding: .3rem 2rem .4rem 2rem;
    border-radius: .4rem;
    background-color: #b19f7184;
    backdrop-filter: blur(40px);
    color: white;
    text-align: center;
    width: 100%;
    max-width: 15rem;
    transition: box-shadow .2s ease, background-color .2s ease;
}
.status-indicator.active {
    box-shadow: 0 0 20px 2px #58b999;
    background-color: #E9B738;
    box-shadow: 0 0 20px 2px #E9B738;
}

/* switch */

.switch {
  display: inline-flex;
  margin: 0 5px 0 5px;
}
.switch input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}
.switch input[type=checkbox]:checked + label {
  background: var(--akzent);
}
.switch input[type=checkbox]:checked + label::after {
  left: calc(100% - 4px);
  transform: translateX(-100%);
  background: var(--color);
}

.switch input[type=radio] {
  height: 0;
  width: 0;
  visibility: hidden;
  position: absolute;
}
.switch input[type=radio]:checked + label {
  background: #66aa66;
}
.switch input[type=radio]:checked + label::after {
  left: calc(100% - 4px);
  transform: translateX(-100%);
}

.switch label {
  cursor: pointer;
  width: 48px;
  height: 24px;
  background: var(--dark-bg-100);
  display: block;
  border-radius: 24px;
  position: relative;
  
  box-shadow: inset  1px 1px 2px var(--dark-900),
                inset -1px -1px 2px var(--white-100);
}
.switch label::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  background: var(--white-500);
  border-radius: 16px;
  transition: 0.2s;
  box-shadow:  1px 1px 2px var(--dark-900),
                -1px -1px 2px var(--white-100);
}
[contentEditable=true]:empty:not(:focus):before{
	content:attr(data-placeholder);
	opacity: 0.45;
}

.switch.radio label{
	width: 32px;
	height: 32px;
}
.switch.radio input[type=radio] + label::after {
  left: 8px;
  top: 8px;
}
.switch.radio input[type=radio]:checked + label::after {
  left: 8px;
  transform: none;
}

.match-dropdown {
	position: absolute;
	right: 0;
    bottom: 0;
    width: 100%;
	z-index: 1;
  
	font-family: 'K2D';
	
    border-radius: 2rem;
    outline: none;
	border: 1px solid #b19f71;
	background-color: #4C4639;
	color: white;
	font-size: .8rem;
	padding: .5rem .9rem .5rem .9rem;
}

select, textarea{
		border-radius: .5rem;
		width: clamp(5rem, 100%, 30rem);
		outline: none;
		/* display: block; */
		border: 1px solid #b19f71;
		background-color: #00000033;
		color: white;
		font-size: .8rem;
		padding: .5rem .9rem .5rem .9rem;
}

.book-event {
    background-color: var(--layer-2-transparent);
    backdrop-filter: blur(24px);
    border-radius: .2rem;
    padding: 1rem;
}

.book-event h3 {
    font-size: 1.7rem;
    margin: 0 0 .4rem .2rem;
}

.button-array {
    all: unset;
}

.button-array {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.button-array div {
    position: relative;
    flex-grow: 1;
    width: auto;
    border-radius: 0;
    border: none;
    border: 4px solid transparent;
}
.button-array div input {
    position: absolute;
    opacity: 0;
}
.button-array div label {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text);
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #60050577;
    transition: background-color .3s ease;
    cursor: pointer;
}
.button-array div input:checked + label {
    background-color: #e08300;
}
.button-array div label:hover {
    background-color: var(--layer-3);
}
.button-array div label p {
    font-size: 1.3rem;
    word-wrap: break-word;
    cursor: pointer;
}
.button-array:last-child div label p:first-child, .button-array:nth-child(5) div label p:first-child {
    font-size: 1rem;
    opacity: .8;
}

.button-array:last-child div label div {
    position: absolute;
    top: 0; left: 0;
    height: auto; width: auto;
    display: flex;
    border: none;
}
.price {
    background-color: #361100;
    padding: .1rem 1.6rem .1rem .7rem;
    font-size: 1rem;
    clip-path: polygon(0 0, 100% 0%, calc(100% - 1.3rem) 100%, 0 100%);
}

.old-price {
    background-color: #43391c;
    opacity: .5;
    text-decoration: line-through;
    padding: .1rem 1.6rem .1rem 1.4rem;
    clip-path: polygon(1.3rem 0, 100% 0%, calc(100% - 1.3rem) 100%, 0 100%);
    margin-left: -1.3rem;
}

.rabatt {
    padding: .1rem 1.6rem .1rem 1.4rem;
    font-size: 1rem;
    clip-path: polygon(1.3rem 0, 100% 0%, calc(100% - 1.3rem) 100%, 0 100%);
    margin-left: -1.6rem;
    background-color: #ce8d00;
}

.book-event .button-array div label.no-bg {
    background-color: #2800004d;
    cursor: default;
}

.event-type-box div {
    height: 5rem;
    min-width: 12rem;
}
.event-time-box div {
    height: 9rem;
    min-width: 10rem;
}
.event-slot-box div label {
    justify-content: end;
    padding-bottom: 1rem;
}
.event-slot-box div {
    height: 5rem;
    min-width: 12rem;
}
.calendar div {
    height: 8vw;
    max-height: 4rem;
}
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 3px solid transparent;
}

.calendar div {
    border: 1px solid transparent;
}

.button-array div .diff-week p {
    color: #ffffff33;
}

.calendar-nav {
    padding: 4px 4px 2px 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.calendar-nav a {
    font-size: 1.3rem;
}
.calendar-nav div, .calendar-nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text);
    width: 100%; height: 3rem;
    background-color: #6e3d0657;
    border: 2px solid transparent;
    transition: background-color .3s ease;
}
#previous-month.disabled {
    display: flex !important;
    pointer-events: none;
    cursor: default;
    color: #ffffff55;
}

.calendar-nav div select {
    appearance: none;
    border: none;
    color: #FFF;
    border-radius: 2px;
    background-color: #45330a77;
    padding: 0 16px;
    outline: none;
    height: 100%; width: 100%;
    font-size: 1rem;
    transition: background-color .3s ease;
}
.calendar-nav a:hover {
    background-color: var(--layer-3);
    cursor: pointer;
}

.calendar-nav div img {
    position: absolute;
    right: 16px;
    height: 1rem;
    opacity: .8;
}

.disabled:hover {
    background-color: #6b520077 !important;
    cursor: default !important;
}


.card-p {
    background-color: var(--layer-2-transparent-2);
    color: var(--background);
    backdrop-filter: blur(24px);
    padding: 2.9rem 3rem;
}


.button-array div .ausverkauft {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    background-color: var(--layer-2-transparent-2);
    
}

.ausverkauft p{
	margin-top: .8rem;
	text-align: center;
	transform: rotate(-10deg);
	font-size: 1.5rem;
}

.gebucht{
	pointer-events:none;
}
/* 
div.gebucht label{
	background-color:  var(--background);
}
div.gebucht label div p{
	background-color: var(--background-bg);
}
 */

.button-array div .NotAvailable {
    background-image: url(/images/nicht-verf.svg);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
    background-color: #302802e4;
}

.form-send-success{
  margin-top: 5rem;
	display: none;
}

.checkout-button-container {
    width: 100%;
    display: flex;
    margin-top: -1rem;
    justify-content: center;
    margin-top: 2rem;
}

#checkout-button {
    grid-area: sign-up;
    height: 2.5rem; width: 15rem;
    align-self: center;
    cursor: pointer;
    justify-self: end;
    border-radius: .3rem;
    background: linear-gradient(#5a0000, #cf8a00);
    border: 1px solid #7e6536;
    box-shadow: none;
    color: var(--background);
    padding: .6rem 0 .5rem 0;
    line-height: 1rem;
    font-size: 1rem;
    transition: filter .2s ease, scale .2s ease;
}
#checkout-button:hover {
    scale: 1.1;
    filter: brightness(1.5);
}

.status {
    margin-bottom: 20vh;
}

.Schule {
    background-color: #54350333 !important;
}
.Schule:hover {
    background-color: #54360333 !important;
}
.Schule p {
    color: #ffffff26;
}

.tier-box div {
    min-width: 12rem;
    border: none;
    border-radius: .2rem;
    overflow: hidden;
}
.tier-box {
    gap: 8px;
}
.tier-box div label p:last-child {
    font-size: 1rem;
    opacity: .8;
}

.form-no-top {
    margin-top: 0;
}

.no-padding {
    padding: 0;
}

#reservation-summary {
    padding: .3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.reservation-list {
    display: flex;
    flex-direction: column;
    /* gap: .5rem; */
    border-radius: .4rem;
    overflow: hidden;
}

.slot-entry {
    padding: .3rem 1rem;
    display: grid;
    grid-template-columns: repeat(3, max-content) auto;
    grid-template-areas: "";
    background-color: #715434;
    gap: 1rem;
    /* border-radius: .2rem; */
}
.slot-entry.paid {
    background-color: #803c1c;
}
.slot-entry:not(:first-child) {
    border-top: 1px solid #e0830269;
}
.slot-time {
    min-width: 8rem;
}
.slot-date {
    min-width: 5rem;
}

.slot-remove {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-self: end;
    color: #ffffff9b;
}
.slot-remove button {
    all: unset;
    font-size: .8rem;
    padding: .3rem 1rem;
    line-height: .8rem;
}
.slot-remove:hover {
    color: white;
}

.list-box {
    background-color: #ffffff25;
    display: flex;
    flex-direction: column;
    border-radius: .7rem;
    overflow: hidden;
    text-align: end;
}
.list-box > *:not(:first-child) {
    border-top: 1px solid #ffffff95;
}
.list-box > * {
    padding: .4rem 1rem;
}

.center-minimal {
    height: max-content;
    align-self: center;
}

/* etienne */
.pill {
    margin-left: .4rem;
    padding: 0 .4rem;
    border-radius: .2rem;
}
.gebucht        { opacity:.6; }
.gebucht-me     { outline: 2px solid #0a7; }
.legend .pill.me { background:#0a7; }
.legend .pill.other { background:#999; }

.thera-select input {
    display: none;
}
.thera-select {
    border-radius: .5rem;
	width: clamp(5rem, 100%, 30rem);
	outline: none;
	border: 1px solid #b19f71;
	background-color: #00000033;
	color: white;
	font-size: .8rem;
	padding: .5rem .9rem .5rem .9rem;
    cursor: pointer;
    margin-top: .3rem;
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    transition: opacity .2s ease, filter .2s ease;
}
.form-two:has(.thera-select) {
    width: 100%;
    padding: 0;
    overflow: visible;
}

.thera-select:has(#therapist-natalia) {
    background-color: #C5E8FC;
    color: #1D6AF4;
    border-color: #1D6AF4;
}
.thera-select:has(#therapist-elena) {
    background-color: #FEF7EA;
    color: #C4872A;
    border-color: #C4872A;
}
.thera-select:hover {
    opacity: .7;
}
.thera-select:has(input:not(:checked)) {
    filter: saturate(.2) brightness(.7);
}

.user-reservations{
	width: 100%;
}
.user-reservations .remove{
	text-align: right;
}

.user-reservations.last td{
	opacity: .6;
}

#reservationen_last{
	overflow: hidden;
	overflow-y: scroll;
	max-height: 10rem;
}

.customer-details {
    margin-top: 5rem;
    flex-direction: column;
    gap: 1rem;
}

.customer-details h1 {
    text-align: center;
    margin-bottom: .3rem;
}

.customer-details h2 {
    font-size: 1.5rem;
}
.customer-details h2 span {
    padding: .5rem 1rem .4rem 1rem;
    margin-left: 1rem;
    font-size: 1.5rem;
    background-color: #30303042;
    border-radius: .4rem;
    border: 1px solid #ffffff93;
}
.member-select-wrapper.account {
    grid-template-rows: 1.8rem 2rem 4rem 1.6rem auto;
    border-radius: 1rem;
    background: linear-gradient(#000000a8, #00000075 4rem, #00000045 7rem, #00000033 10rem, #00000000 13rem);
}

.days-left {
    margin-left: .7rem;
    background-color: #383838c4;
    padding: .1rem .5rem .2rem .5rem;
    border-radius: .2rem;
    border: 1px solid #ffffff3d;
}

.abo-other {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.expiry-date {
    font-weight: bold;
}

.abos-other * {
    cursor: pointer;
}
.abos-other {
    grid-template-rows: 1.8rem auto 2rem;
    height: max-content; min-width: 15rem;
    cursor: pointer;
    border-radius: 1rem;
    padding: 1rem 1.5rem 1rem 1.5rem;
    background: linear-gradient(#000000d1, #00000075 50%, #00000055 100%);
}

.abos-other .member-select-tier-description span {
    padding: .1rem .5rem .2rem .5rem;
}
.abos-other .member-select-tier-description {
    flex-wrap: wrap;
}
.abos-other h4 {
    font-size: 1.5rem;
}

.abos-other:hover {
    outline: 1px solid white;
}

.account-heading-h2 {
    margin-bottom: 0 !important;
    margin-top: 1rem;
}


.access-code {
    padding: 1rem;
    background-color: #ffffff25;
    border-radius: .7rem;
    margin-bottom: 0 !important;
}

.title-padding {
    padding: 1.7rem 2.5rem 2.5rem 2.5rem;
}
.title-padding .list-box {
    width: 100%;
}

/* spaceing */

.pad-400{
	padding: 4rem
}
.pad-300{
	padding: 3rem
}
.pad-200{
	padding: 2rem
}
.pad-100{
	padding: 1rem
}
.pad-50{
	padding: .5rem
}
.pad-25{
	padding: .25rem
}
.pad-20{
	padding: .2rem
}
.pad-10{
	padding: .1rem
}

.pad-top-400{
	padding-top: 4rem
}
.pad-top-300{
	padding-top: 3rem
}
.pad-top-200{
	padding-top: 2rem
}
.pad-top-100{
	padding-top: 1rem
}
.pad-top-50{
	padding-top: .5rem
}
.pad-top-25{
	padding-top: .25rem
}
.pad-top-20{
	padding-top: .2rem
}
.pad-top-10{
	padding-top: .1rem
}

.pad-left-400{
	padding-left: 4rem
}
.pad-left-300{
	padding-left: 3rem
}
.pad-left-200{
	padding-left: 2rem
}
.pad-left-100{
	padding-left: 1rem
}
.pad-left-50{
	padding-left: .5rem
}
.pad-left-25{
	padding-left: .25rem
}
.pad-left-20{
	padding-left: .2rem
}
.pad-left-10{
	padding-left: .1rem
}

.pad-right-400{
	padding-right: 4rem
}
.pad-right-300{
	padding-right: 3rem
}
.pad-right-200{
	padding-right: 2rem
}
.pad-right-100{
	padding-right: 1rem
}
.pad-right-50{
	padding-right: .5rem
}
.pad-right-25{
	padding-right: .25rem
}
.pad-right-20{
	padding-right: .2rem
}
.pad-right-10{
	padding-right: .1rem
}

.pad-bottom-400{
	padding-bottom: 4rem
}
.pad-bottom-300{
	padding-bottom: 3rem
}
.pad-bottom-200{
	padding-bottom: 2rem
}
.pad-bottom-100{
	padding-bottom: 1rem
}
.pad-bottom-50{
	padding-bottom: .5rem
}
.pad-bottom-25{
	padding-bottom: .25rem
}
.pad-bottom-20{
	padding-bottom: .2rem
}
.pad-bottom-10{
	padding-bottom: .1rem
}

.marg-400{
	margin: 4rem
}
.marg-300{
	margin: 3rem
}
.marg-200{
	margin: 2rem
}
.marg-100{
	margin: 1rem
}
.marg-50{
	margin: .5rem
}
.marg-25{
	margin: .25rem
}
.marg-20{
	margin: .2rem
}
.marg-10{
	margin: .1rem
}

.marg-top-400{
	margin-top: 4rem
}
.marg-top-300{
	margin-top: 3rem
}
.marg-top-200{
	margin-top: 2rem
}
.marg-top-100{
	margin-top: 1rem
}
.marg-top-50{
	margin-top: .5rem
}
.marg-top-25{
	margin-top: .25rem
}
.marg-top-20{
	margin-top: .2rem
}
.marg-top-10{
	margin-top: .1rem
}

.marg-left-400{
	margin-left: 4rem
}
.marg-left-300{
	margin-left: 3rem
}
.marg-left-200{
	margin-left: 2rem
}
.marg-left-100{
	margin-left: 1rem
}
.marg-left-50{
	margin-left: .5rem
}
.marg-left-25{
	margin-left: .25rem
}
.marg-left-20{
	margin-left: .2rem
}
.marg-left-10{
	margin-left: .1rem
}

.marg-right-400{
	margin-right: 4rem
}
.marg-right-300{
	margin-right: 3rem
}
.marg-right-200{
	margin-right: 2rem
}
.marg-right-100{
	margin-right: 1rem
}
.marg-right-50{
	margin-right: .5rem
}
.marg-right-25{
	margin-right: .25rem
}
.marg-right-20{
	margin-right: .2rem
}
.marg-right-10{
	margin-right: .1rem
}

.marg-bottom-400{
	margin-bottom: 4rem
}
.marg-bottom-300{
	margin-bottom: 3rem
}
.marg-bottom-200{
	margin-bottom: 2rem
}
.marg-bottom-100{
	margin-bottom: 1rem
}
.marg-bottom-50{
	margin-bottom: .5rem
}
.marg-bottom-25{
	margin-bottom: .25rem
}
.marg-bottom-20{
	margin-bottom: .2rem
}
.marg-bottom-10{
	margin-bottom: .1rem
}

/* sizeing */

.max-width-10{
	max-width: .1rem;
}
.max-width-20{
	max-width: .2rem;
}
.max-width-25{
	max-width: .25rem;
}
.max-width-50{
	max-width: .5rem;
}
.max-width-100{
	max-width: 1rem;
}
.max-width-200{
	max-width: 2rem;
}
.max-width-300{
	max-width: 3rem;
}
.max-width-400{
	max-width: 4rem;
}
.max-width-500{
	max-width: 5rem;
}
.max-width-600{
	max-width: 6rem;
}
.max-width-700{
	max-width: 7rem;
}
.max-width-800{
	max-width: 8rem;
}

.width-10{
	width: .1rem;
}
.width-20{
	width: .2rem;
}
.width-25{
	width: .25rem;
}
.width-50{
	width: .5rem;
}
.width-100{
	width: 1rem;
}
.width-200{
	width: 2rem;
}
.width-300{
	width: 3rem;
}
.width-400{
	width: 4rem;
}
.width-500{
	width: 5rem;
}
.width-600{
	width: 6rem;
}
.width-700{
	width: 7rem;
}
.width-800{
	width: 8rem;
}



.confirm-modal[hidden]{ display:none; }
  .confirm-modal{ position:fixed; inset:0; z-index:9999; }
  .confirm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  .confirm-modal__panel{
    position:relative; margin:auto; top:30vh; max-width:520px; width:calc(100% - 2rem);
    background:#111; color:#fff; border-radius:12px; padding:1.25rem; box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .confirm-modal__title{ margin:0 0 .5rem; font-size:1.125rem; }
  .confirm-modal__text{ margin:0 0 1rem; opacity:.9; }
  .confirm-modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; }
  .btn{ padding:.6rem .9rem; border-radius:.6rem; border:0; cursor:pointer; }
  .btn--ghost{ background:transparent; color:#fff; outline:1px solid rgba(255,255,255,.25); }
  .btn--danger{ background:#e5484d; color:#fff; }

.selection {
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;

    cursor: text;
}


body .hover-100 {
    cursor: pointer;
    transition: filter .2s ease, scale .2s ease;
}
body .hover-100:hover {
    filter: brightness(.7);
    scale: 1.05;
}
/* usernavigation indicator where you are */
.active{
	background-color: #E9B738;
}
.past{
	opacity: .7;
}

.different-month {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

a.disabledmonth {
	color: #ffffff77;
}

.flex-vertical-gap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.flex-horizontal-gap {
    display: flex;
    gap: 1rem;
}

.card {
    padding: 1rem;
    background-color: #ffffff25;
    border-radius: .7rem;
}

.form-wrap.no-border, .no-border{
	border: none;
}
.form-wrap.no-shadow, .no-shadow{
	box-shadow: none;
}
.form-wrap.no-blure, .no-blure{
	backdrop-filter: none;
}
.form-wrap.no-background, .no-background{
	background-color: none;
	background: none;
}
.status-line{
	width: 70%;
}

.cents {
  font-size: 0.6em;
  vertical-align: lower;
}

.member-select-wrapper.no-style {
	max-height: 0rem;
	padding: 0;
}
.no-style {
	background: none;
	box-shadow: none;
}

.input-space:has(.strength-meter) {
    width: 100%;
}



.angebot-showcase-container {
    position: relative;
    width: 92vw;
    max-width: 1200px;
    margin: 3rem auto 3rem auto;
    overflow: hidden;
    border-radius: 3rem;
    aspect-ratio: 1.5 / 1;
    /* border: 1px solid red; */
}
.angebot-showcase-container-inner {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* remove scroll-behavior here to avoid conflicts with jQuery */
    /* scroll-behavior: smooth; */
    scroll-snap-type: x mandatory;
    will-change: scroll-position;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;
}
.angebot-showcase-container-inner::-webkit-scrollbar {
  display: none;              /* Chrome/Safari/Edge (Blink/WebKit) */
}
.angebot-showcase {
    position: relative;
    aspect-ratio: 1.5 / 1;
    height: 100%;
    background-size: cover;
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.angebot-showcase-slider {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    translate: -50% 0;
    z-index: 10;
    display: flex;
    gap: .5rem;
    height: .8rem;
    /* border: 1px solid blue; */
}
.angebot-showcase-slider span {
    all: unset;
    height: 100%; aspect-ratio: 1;
    border-radius: 50rem;
    border: 2px solid white;
    cursor: pointer;
    animation-name: angebot-anim;
    animation-duration: 1s;
    animation-iteration-count: 3;
    transition: background-color .2s, aspect-ratio .2s, scale .2s;
}

@keyframes angebot-anim {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
    100% {
        scale: 1;
    }
}

.angebot-showcase-slider span:hover {
    scale: 1.2;
    background-color: #ffffff7e;
}
.angebot-showcase-slider span.active {
    background-color: white;
    aspect-ratio: 2 / 1;
}
.angebot-showcase-container-inner.no-snap {
  scroll-snap-type: none !important;
}


.angebot-showcase-calls {
    position: absolute;
    bottom: 3.3rem;
    left: 50%;
    translate: -50% 0;
    z-index: 10;
    display: flex;
    gap: .7rem;
    height: auto;
    flex-wrap: wrap;
    width: 90%;
    justify-content: center;
    /* border: 1px solid blue; */
}
.angebot-showcase-call {
    padding: .5rem 1.4rem;
    border: 1px solid #ffffff;
    border-radius: 10rem;
    cursor: pointer;
    box-shadow: 0 0 13px 0 rgba(255, 255, 255, 0.745);
    background-color: #C8AB8C;
    background-color: #9e886f;
    background-color: #d3a776;
    text-align: center;
    transition: background-color .2s;
}

.phone-logo {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/images/logo.svg);
    width: 3rem; aspect-ratio: 1;
    position: fixed;
    top: 1rem; left: 1.5rem;
    cursor: pointer;
    z-index: 100;
    display: none;
}
/* .squash .angebot-showcase-call {
    background-color: #DAB997;
}
.bouldern .angebot-showcase-call {
    background-color: #999592;
}
.sauna .angebot-showcase-call {
    background-color: #79421C;
} */

.angebot-showcase-call:hover {
    background-color: rgba(0, 0, 0, 0.627);
}

@media only screen and (max-width: 600px) {
  .content-grid:has(.form-wrap) {
    padding-top: 6rem;
  }

  .login-lock {display: none;}
  fieldset {flex-wrap: wrap;}

  .angebot-showcase-container {
    border-radius: 1rem;
    }
    .account-nav {
        display: none;
    }
    .content-grid {
        padding-top: 1.5rem;
    }
    .phone-logo {
        display: block;
    }
}

.default-section h2 {
    font-size: 2rem;
    line-height: .8;
    z-index: 3;
    position: relative;
    margin-top: -.3rem;
}
.default-section {
    margin: 2rem auto 5rem auto;
    border-radius: 3rem;
    width: 92vw;
    max-width: 1200px;
    overflow: hidden;
    padding: 2rem;
    position: relative;
    background-color: red;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.default-section .angebot-showcase-calls {
    bottom: 1.5rem;
}
.cms-home-module--text {
    background-color: #353e43;
}
.cms-home-module--text > :last-child {
    margin-bottom: 0;
}
.cms-home-module--image {
    min-height: 18rem;
}
.cms-home-module--image h2 {
    position: relative;
    z-index: 2;
}
.cms-page-image-module {
    padding: 1rem;
}
.cms-page-image-module img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .75rem;
    object-fit: cover;
}
.fade-out {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 10rem;
    z-index: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.802), transparent);
}

.top-logo {
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url(/images/logo.svg);
    height: 100%;
}


#subscription {
    all: unset;
    position: relative;
    display: block;
    height: 1.6rem; width: 3.5rem;
    border-radius: 10rem;
    background-color: #bcb9b5;
    margin: .5rem 0 1.5rem 0;
    cursor: pointer;
    pointer-events: all;
}
#subscription::after {
    content: "";
    left: .2rem; top: .2rem;
    position: absolute;
    display: block;
    height: 1.2rem; aspect-ratio: 1;
    background-color: #464646;
    border-radius: 50%;
    transition: background-color .2s, left .2s, box-shadow .2s;
    transition-timing-function: linear(0, 0.007 0.9%, 0.029 1.9%, 0.118 4.1%, 0.642 12.6%, 0.847 16.7%, 0.922 18.7%, 0.983 20.8%, 1.029 23%, 1.059 25.3%, 1.078 28.3%, 1.079 31.8%, 1.014 46.3%, 0.995 55.4%, 1);
}
#subscription:checked::after {
    left: calc(100% - .2rem - 1.2rem);
    background-color: #a76617;
    box-shadow: 0 0 5px 0 #a76617;
}
#subscription:checked {
    background-color: #edd6b9;
}


@media only screen and (max-width: 770px) {
    .member-select-wrapper {
        min-width: 18rem;
    }
    .member-select-booking {
        width: 100%;
    }
    .member-select-tier-description {
        flex-wrap: wrap;
    }
    .member-select-tier-description span {
        padding: .1rem .5rem .2rem .5rem;
    }
    .member-select-wrapper {
        grid-template-rows: 1.8rem min-content 3rem auto;
    }
    .member-select-wrapper.account {
        grid-template-rows: 1.8rem min-content 4rem 1.6rem auto;
    }
}

@media only screen and (max-width: 880px) {
    .form-wrap fieldset {
        flex-direction: column !important;
        gap: .2rem !important;
    }
}
@media only screen and (max-width: 500px) {
    .content-grid:has(.center) > *, .content-grid:has(.form-wrap) > * {
        width: 100%;
        grid-column: 1 / -1;
        padding: 1.5rem;
    }
    .form-two {
        flex-direction: column;
    }
}

.access-code {
    line-height: 3rem;
}

#update-nav > div {
    flex-wrap: wrap;
    justify-content: center;
}
#update-nav > div > div {
    min-width: 5rem;
}
.form-wrap > .form-wrap {
    overflow: visible;
}

.content-grid:has(.error-page) {
    padding-top: 20rem;
}
.error-page {
    text-align: center;
}


@media(max-width: 770px){
	.footer-wrap {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto 3rem;
		grid-template-areas: "address", "metanav", "links", "logos";
	}
}
@media(max-width: 420px){
	.footer-wrap {
		grid-template-rows: auto auto auto auto;
	}
    .footer-logo-wrap {
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    .footer-logo-wrap a {
        height: 3rem;
    }
    .default-section h2.massage-title{
    	font-size: 1.3rem;
    }
    .news_image{
    	width: 5rem;
    }
}

.footer-legal {
    margin-top: 1rem;
}

.checkout-msg { margin:8px 0; color:#b00020; }
.htmx-indicator { display:none; }