@font-face {
	font-family: 'primary-font';
	src: url('../fonts/FiraSans/Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'primary-font';
	src: url('../fonts/FiraSans/Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
}

*,
*:before, 
*:after {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/** /
* {
  outline: 1px dotted rgba( 0, 0, 0, .2 );
}
/**/

:root {
  --text-color: #111;
  --primary-color: rgb(20,194,20);
  --yellow: #fc0;
  --color-m: rgb(96,152,255);
  --color-w: rgb(240,130,254);
  --color-s: rgb(244,66,46);
  --lite-bg: rgb(244, 246, 230);
  --error-bg: rgb(255, 210, 218);
  --required-color: #c00;
  --info-color: #c00;
}

html {
  font-size: 62.5%;
  line-height: 1.333em;
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 38rem;
}

body {
  background-color: #fff;
  /* border: .5rem dashed #c00; */
  border-bottom: 0;
  border-top: 0;
  color: var(--text-color);
  font: normal 1.6rem/1.3 'primary-font';
  min-height: 100%;
  overflow-x: hidden;
  /*
  padding: 
    env(safe-area-inset-top) 
    env(safe-area-inset-right) 
    env(safe-area-inset-bottom) 
    env(safe-area-inset-left);
  */
  width: 100dvw;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin-bottom: 2rem;
}

h1 {
    color: var(--primary-color);
}

p {
    font-size: 2.1rem;
}

body:not(.home) #map {
    height: 30rem;
    margin-top: 10rem;
    width: 100%;
}

body.home #map {
    bottom: 3rem;
    left: 24rem;
    position: absolute;
    right: 0;
    top: 14rem;
    @media( width < 768px ) {
        bottom: 13rem;
        left: 0;
    }
}

.leaflet-marker-pane img[src*="marker-w.svg"] {
    /* visibility: hidden; */
}

body.dev #map {
    /* bottom: 3.5rem !important; */
}

header {
    background-color: #fff;
    /* background-image: url(../img/header.jpg); */
    /* background-size: 100%; */
    /* backdrop-filter: saturate(180%) blur(10px); */
    height: 5rem;
    left: 0;
    max-width: 96rem;
    padding: 0 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3000;
    /*
    body.therapie &,
    body.therapien &,
    body.home & {
        height: 5rem;
    }
    */
    @media( width > 960px ) {
        left: calc( ( 100vw - 96rem ) / 2 );
    }
    & > a#logo {
        color: #000c;
        display: flex;
        font-size: 2.4rem;
        text-decoration: none;
        top: 1rem;
        position: fixed;
        width: 26rem;
        z-index: 5000;
        & > div {
            margin-top: .3rem;
            & > span {
                color: #999;
            }
        }
    }

    input[type=checkbox] {
        appearance: none;
        /* background-color: #fff; */
        background-image: url(../img/menu--open.svg);
        /*
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        */
        cursor: pointer;
        height: 3.2rem;
        position: fixed;
        right: 1rem;
        top: 1rem;
        width: 3.2rem;
        z-index: 10000;
        &:checked {
            /* background-color: var(--text-color); */
            background-image: url(../img/gallery--close.svg);
        }
    }

    @media( width > 768px ) {
        input[type=checkbox] {
            display: none;
        }
    }
    .navigation {
        @media( width > 767px ) {
            nav {
                display: flex;
                gap: 1.5rem;
                position: absolute;
                right: 2rem;
                top: 1.8rem;
                a {
                    color: #000c;    
                    font-size: 1.8rem;
                    text-decoration: none;
                    &:hover {
                        text-decoration: underline;
                        text-underline-offset: .3rem;
                        text-decoration-thickness: .1rem;
                    }
                }
                &.nav--meta {
                    display: none;
                }
            }
        }
        @media( width < 768px ) {
            background-color: var(--primary-color);
            bottom: 0;
            padding: 5rem 1rem 1rem 1rem;
            position: fixed;
            top: 0;
            right: -32rem;
            transition: .15s right ease-in-out;
            width: 32rem;
            z-index: 9999;
            nav {
                margin-bottom: 2rem;
                a {
                    color: #fff;
                    display: block;
                    font-size: 2.1rem;
                    line-height: 1.7;
                    text-decoration: none;
                }
            }
        }
    }
    input:checked + .navigation {
        right: 0;
    }
    
    /*
    &:before {
        background-image: linear-gradient( 90deg, #fff, var(--lite-bg) );
        border-bottom: .1rem solid var(--lite-bg);
        content: '';
        display: block;
        height: 8rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
    }*/
}

body.page--info nav a.heilpraktikerinfo,
body.home nav a.heilpraktikersuche,
body.therapie nav a.therapiensuche,
body.therapien nav a.therapiensuche,
body.page--impressum nav a.page--impressum, 
body.page--datenschutz nav a.page--datenschutz, 
body.page--agb nav a.page--agb, 
body.page--kundeninformationen nav a.page--kundeninformationen, 
body.page--nutzungsbedingungen nav a.page--nutzungsbedingungen, 
body.page--wichtige-hinweise nav a.page--wichtige-hinweise {
    color: var(--primary-color);
    @media( width < 768px ) {
        color: var(--text-color);
    }
}

main {
    margin: 16rem auto 2rem;
    max-width: 96rem;
    padding: 2rem;
    p {
        margin-top: 2rem;
    }
    a {
        color: #009;
        text-decoration-color: #0093;
        &:hover {
            text-decoration-color: #009c;
        }
    }
}

img {
    max-width: 100%;
}

ul {
    list-style-type: none;
    li {
        &:before {
            content: '– ';
        }
    }
}

.therapie--text {
    font-size: 2.1rem;
}

.gallery {
    border: .1rem solid var(--primary-color);
    border-radius: .3rem;
    display: flex;
    gap: 1rem;
    margin-top: 5rem;
    padding: 1rem;
    width: 100%;
    img {
        cursor: zoom-in;
        object-fit: contain;
        width: calc( 25% - 1rem );
    }
}

.leaflet-popup-content {
    font-size: 1.3rem !important;
    margin-left: 1rem !important;
    & > a.popup {
        border-left: .3rem solid var(--color-m);
        color: #000 !important;
        display: block;
        font-size: 1.5rem;
        text-decoration-color: #0003;
        padding-left: .5rem;
        &.popup-w {
            border-color: var(--color-w);
        }
        &:hover {
            text-decoration-color: #0009;
        }
        .heilpraktikername {
            text-transform: uppercase;
        }
    }
    & > a.popup-suche {
        color: #999 !important;
        display: block;
        font-size: 1.2rem;
        margin: 1.5rem 0 0;
        padding-left: 1rem;
        text-decoration-color: #0003;
    }
    & > small {
        font-size: 1.2rem;
        padding-left: 1rem;
    }
}

.leaflet-control-attribution {
    font-size: 1.2rem;
}

.required {
    color: #c00;
}

form[action*="suche"] {
    background-color: var(--lite-bg);
    border: .1rem solid #ccc;
    border-radius: .3rem;
    padding: 1rem 2rem 2rem 2rem;
    max-width: 30rem;
    label {
        display: block;
        padding: .5rem 0;
    }
    input {
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: block;
        font: normal 1.6rem/1.3 'primary-font';
        margin-bottom: 1rem;
        padding: .5rem;
        &[name='freitext'] {
            width: 100%;
        }
        &[type="submit"] {
            background-color: var(--primary-color);
            background-image: url('../img/icons/submit.svg');
            background-position: calc( 100% - .2rem) .8rem;
            background-repeat: no-repeat;
            background-size: 1.6rem;
            border: none;
            
            cursor: pointer;
            margin-bottom: 2rem;
            margin-top: 2rem;
            padding-inline-start: 1rem;
            padding-inline-end: 2rem;
            transition: transform .15s ease-in-out;
            &:hover {
                box-shadow: 0 .2rem 1rem #0003;
                transform: translateY(-.1rem)
            }
        }
    }
    select {
        appearance: none;
        background-color: #fff;
        background-image: url('../img/icons/select.svg');
        background-position: calc( 100% - .6rem) .7rem;
        background-repeat: no-repeat;
        background-size: 1.6rem;
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: block;
        font: normal 1.6rem/1.3 'primary-font' !important;
        margin-bottom: 1rem;
        padding: .5rem;
        position: relative;
        width: 100%;
        option {
            font: normal 1.6rem/1.3 'primary-font' !important;
        }
    }
    .info {
        border-top: .1rem solid #0003;
        display: block;
        padding-top: 1.6rem;
    }
}

div#searchbar:empty {
    /* background-color: var(--lite-bg); */
    background-image: linear-gradient( 180deg, var(--lite-bg), #fff );
    /* border-bottom: .1rem solid #ccc; */
    border-top: .1rem solid #ccc;
    display: flex;
    height: 5rem;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 5rem;
    z-index: 2000;
}

div#searchbar:not(:empty) {
    background-color: var(--lite-bg);
    border-bottom: .1rem solid #ccc;
    border-top: .1rem solid #ccc;
    /* border-radius: 1rem; */
    /* box-shadow: 0 0 1rem #0003; */
    /* left: calc( ( 100vw - 85rem ) / 2 ); */
    /* max-width: 90rem; */
    /* display: flex; */
    justify-content: center;
    left: 0;
    padding: 1rem 1.5rem 0 1.5rem;
    position: fixed;
    right: 0;
    top: 5rem;
    z-index: 2000;
    @media( width < 768px ) {
        overflow-y: hidden;
        overflow-x: scroll;
    }
    form[action*="index"] {
        margin: 0 auto;
        max-width: 96rem;
        padding: 0 2rem;
        label {
            color: #999;
            display: block;
            padding: 1rem 0 0;
        }
        fieldset {
            display: flex;
            gap: 1rem;
            /* justify-content: space-between; */
            div {
                input {
                    border: .1rem solid var(--primary-color);
                    border-radius: .3rem;
                    display: block;
                    font-family: primary-font;
                    font-size: 1.6rem;
                    font-weight: normal;
                    line-height: 1.3;
                    margin-bottom: 1rem;
                    padding: .5rem;
                    &[name='freitext'] {
                        width: 100%;
                    }
                    &[type="submit"] {
                        background-color: var(--primary-color);
                        background-image: url('../img/icons/submit.svg');
                        background-position: calc( 100% - .2rem) .8rem;
                        background-repeat: no-repeat;
                        background-size: 1.6rem;
                        border: none;
                        cursor: pointer;
                        margin-bottom: 2rem;
                        margin-top: 2.1rem;
                        padding-inline-start: 1rem;
                        padding-inline-end: 2rem;
                        transition: transform .15s ease-in-out;
                        &:hover {
                            box-shadow: 0 .2rem 1rem #0003;
                            transform: translateY(-.1rem)
                        }
                    }
                }
                select {
                    appearance: none;
                    background-color: #fff;
                    background-image: url('../img/icons/select.svg');
                    background-position: calc( 100% - .6rem) .7rem;
                    background-repeat: no-repeat;
                    background-size: 1.6rem;
                    border: .1rem solid var(--primary-color);
                    border-radius: .3rem;
                    color: var(--text-color) !important;
                    display: block;
                    /* font-family: primary-font; */
                    font-size: 1.6rem;
                    font-weight: normal;
                    line-height: 1.3;
                    margin-bottom: 1rem;
                    max-width: 24rem;
                    padding: .5rem 2.5rem .5rem .5rem;
                    position: relative;
                    width: 100%;
                }
            }
        }
        
        .info {
            border-top: .1rem solid #0003;
            display: block;
            padding-top: 1.6rem;
        }
    }
}

footer {
    background-color: var(--lite-bg);
    border-top: .1rem solid #ccc;
    bottom: 0;
    height: 3rem;
    left: 0;
    line-height: 3rem;
    /* margin: 2rem auto; */
    /* max-width: 96rem; */
    padding: 0 2rem;
    position: fixed;
    right: 0;
    z-index: 5000;
    nav {
        display: flex;
        justify-content: center;
        gap: 1rem;
        a {
            color: var(--text-color);
            font-size: 1.3rem;
            text-decoration: none;
            &:hover {
                text-decoration: underline;
                text-underline-offset: .3rem;
                text-decoration-thickness: .1rem;
            }
        }
    } 
}

@media( width < 768px ) {
    footer {
        display: none;
    }
}

.right {
    float: right;
}

body.page--therapien {
    .columns {
        column-count: 3;
        column-gap: 2rem;
        column-fill: balance;
        p + & {
            margin-top: 5rem;
        }
        a {
            color: var(--text-color);
            display: inline-block;
            margin-bottom: .5rem;
        }
        @media ( width < 900px ) {
            column-count: 2;
        }
        @media ( width < 600px ) {
            column-count: 1;
        }
    }

    .group:not(:first-of-type) {
        margin-bottom: 2rem;
    }

    .letter {
        color: var(--primary-color);
    }
}

#anzeige {
    bottom: 2rem;
    box-shadow: 0 0 1rem #0003;
    cursor: pointer;
    left: calc( ( 100vw - 64rem ) / 2 );
    max-width: 64rem;
    position: absolute;
    z-index: 3000;
}

#mapstyle {
    background-color: #fffc;
    border-radius: .3rem;
    box-shadow: 0 0 1rem #0003;
    color: var(--text-color);
    font-size: 1.3rem;
    padding: .3rem .5rem;
    position: absolute;
    right: 1rem;
    top: 9rem;
    z-index: 3000;
}

#gallery {
    align-items: center;
    background-color: #000d;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    /* overflow: auto; */
    /* overscroll-behavior: contain; */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
    img {
        max-height: 80%;
        max-width: 80%;
    }

    #gallery--close-bg {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .gallery--control {
        background-color: #fffc;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 66%;
        border: .1rem solid #000c;
        border-radius: 50%;
        cursor: pointer;
        height: 3rem;
        position: fixed;
        top: calc( ( 100vh - 3rem ) / 2 );
        transition: transform .1s ease-in-out;
        user-select: none;
        width: 3rem;
        z-index: 1;
        &:hover {
            background-color: #fff;
            transform: scale(1.1);
        }
    }

    #gallery--close {
        background-image: url(../img/gallery--close.svg);
        right: 2rem;
        top: 2rem;
    }

    #gallery--previous {
        background-image: url(../img/gallery--previous.svg);
        left: 2rem;
        
    }

    #gallery--next {
        background-image: url(../img/gallery--next.svg);
        right: 2rem;
    }
}

#result-list {
    background-color: #fff;
    /* backdrop-filter: blur(.5rem); */
    border-right: .1rem solid #ccc;
    bottom: 3rem;
    /* box-shadow: 0 0 1rem #0003; */
    left: 0;
    overflow-y: scroll;
    padding-bottom: 5rem;
    position: fixed;
    top: 14rem;
    width: 32rem;
    z-index: 1000;
    @media( width < 768px ) {
        border-right: 0;
        border-top: .1rem solid #ccc;
        bottom: 0;
        display: flex;
        font-size: 1.3rem;
        height: 13rem;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        top: auto;
        width: 100vw;
    }

    & > div.list-item {
        margin: 1.5rem 1.5rem 2.5rem 1rem;
        position: relative;
        @media( width < 768px ) {
            display: inline-block;
            flex-basis: 28rem;
            flex-shrink: 1;
            margin-right: 0;
            margin-top: 0;
            scroll-snap-align: start;
            /* width: 28rem !important; */
        }
        & > a.entry {
            border-left: .3rem solid var(--color-w);
            color: var(--text-color);
            display: block;
            padding-left: .5rem;
            width: 28rem !important;
            @media( width < 768px ) {
                border-left: 0;
                border-top: .3rem solid var(--color-w);
                padding-top: .5rem;
                margin-top: 3.5rem;
            }
            &.entry-m {
                border-color: var(--color-m);
            }
            .heilpraktikername {
                text-transform: uppercase;
            }
        }
        & > small {
            cursor: pointer;
            display: block;
            padding-top: .3rem;
            padding-left: .7rem;
            text-align: right;
            @media( width < 768px ) {
                padding-left: 1.8rem;
                position: absolute;
                left: .3rem;
                text-align: left;
                top: .4rem;
            }
            img {
                vertical-align: middle;
                width: 1.1rem;
                @media( width < 768px ) {
                    position: absolute;
                    left: 0;
                }
            }
        }
    } 
}

.button {
    background-color: var(--primary-color);
    border-radius: .3rem;
    color: #fff;
    display: inline-block;
    padding: .5rem 1rem;
    text-decoration: none;
    white-space: nowrap;
    &.yellow {
        background-color: var(--yellow);
    }
    span {
        color: #000;
    }
}

#slider {
    border: .1rem solid var(--primary-color);
    border-radius: .3rem;
    height: 40rem;
    margin-bottom: 5rem;
    .slide {
        align-items: center;
        display: flex;
        justify-content: center;
        height: 100%;
        max-height: 39.8rem;
        position: relative;
        width: 100%;
        img {
            object-fit: cover;
            height: 100%;
            width: 100%;
        }
        span {
            bottom: 1rem;
            color: #fff;
            font-size: 2.4rem;
            font-weight: bold;
            text-shadow: 0 0 .5rem #0009;
            left: 1rem;
            position: absolute;
        }
    }
}

.slick-arrow {
    &:before {
        color: var(--primary-color) !important;
        font-size: 3.2rem !important;
    }
    &.slick-prev {
        left: -4rem !important;
    }
    &.slick-next {
        right: -2.8rem !important;
    }
}