@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);
  --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 {
    margin-bottom: 2rem;
}

p {
    font-size: 2.1rem;
}

#map {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 8rem;
}

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

header {
    /* background-color: #fff; */
    /* backdrop-filter: saturate(180%) blur(10px); */
    height: 8rem;
    left: 0;
    max-width: 96rem;
    padding: 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    @media( width > 960px ) {
        left: calc( ( 100vw - 96rem ) / 2 );
    }
    & > a#logo {
        color: #000c;
        display: flex;
        font-size: 2.4rem;
        text-decoration: none;
        width: 26rem;
        & > div {
            margin-top: .3rem;
            & > span {
                color: #999;
            }
        }
    }
    nav {
        display: flex;
        gap: 1rem;
        position: absolute;
        right: 1rem;
        top: 2.5rem;
        a {
            color: #000c;    
            font-size: 1.3rem;
            text-decoration: none;
        }
    }
    &: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;
    }
}

main {
    margin: 12rem auto 2rem;
    max-width: 96rem;
    padding: 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: '– ';
        }
    }
}

.leaflet-popup-content {
    font-size: 1.3rem !important;
    margin-left: 1rem !important;
    & > a {
        border-left: .5rem solid var(--color-m);
        color: #000 !important;
        display: inline-block;
        font-size: 1.3rem;
        text-decoration-color: #0003;
        padding-left: .5rem;
        &.popup-w {
            border-color: var(--color-w);
        }
        &:hover {
            text-decoration-color: #0009;
        }
    }
}

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

.required {
    color: var(--required-color);
}

form {
    fieldset {
        /* background-color: #f3f4f5; */
        background-color: var(--lite-bg);
        border: .1rem solid #ccc;
        border-radius: .3rem;
        margin: 2rem 0;
        padding: 1rem 2rem 2rem 2rem;
        position: relative;
    }
    legend {
        font-weight: bold;
        text-transform: uppercase;
    }
    label[for] {
        display: inline-block;
        padding: .5rem 0;
        width: 17rem;
        @media( width < 720px ) {
            width: 100%;
        }
    }
    input[type=email],
    input[type=password],
    input[type=submit],
    input[type=text],
    select,
    textarea {
        appearance: none;
        background-color: #fff;
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        display: inline-block;
        font: normal 1.6rem/1.3 'primary-font';
        /* margin-bottom: 1rem; */
        padding: .5rem;
        width: calc( 100% - 18rem );
        @media( width < 720px ) {
            width: 100%;
        }
        &#plz {
            margin-left: .6rem;
            /* margin-right: .5rem; */
            width: 8rem;
            @media( width < 720px ) {
                margin-left: 0;
                width: 14rem;
            }
        }
        &#ort {
            width: 61.3rem;
            @media( width < 960px ) {
                width: calc( 100vw - 34.8rem );
            }
            @media( width < 720px ) {
                width: calc( 100vw - 22.65rem );
            }
        }
        &.error {
            background-color: var(--error-bg)
        }
        &[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;
            width: auto;
            &:hover {
                box-shadow: 0 .2rem 1rem #0003;
                transform: translateY(-.1rem)
            }
        }
    }
    textarea {
        min-height: 12rem;
    }
    select {
        background-image: url('../img/icons/select.svg');
        background-position: calc( 100% - .6rem) .7rem;
        background-repeat: no-repeat;
        background-size: 1.6rem;
    }
    .therapyselector {
        border: .1rem solid var(--text-color);
        border-radius: .3rem;
        /* display: none; */
        height: 16rem;
        overflow-x: scroll;
        overscroll-behavior: contain;
        padding: 1rem;
        width: calc( 100% - 18rem );
        @media( width < 720px ) {
            width: 100%;
        }
        a {
            display: block;
        }
    }
    .info {
        border-top: .1rem solid #0003;
        display: block;
        padding-top: 1.6rem;
    }
    .buttonbar {
        input[type="submit"] {
            margin-right: 1rem;
        }
    }
    #password-toggle {
        @media( width >= 720px ) {
            padding-left: 18rem;
        }
    }
}

.input-help {
    color: #0006;
    font-size: 1.3rem;
    width: 17rem;
    @media( width < 720px ) {
        margin-top: 1rem;
        width: 100%;
    }
    span {
        white-space: nowrap;
    }
}

.help-block {
    color: var(--info-color);
    display: block;
    font-size: 1.3rem;
    margin-bottom: 2rem;
}

.uploaded-image {
    max-height: 30rem;;
}

.input-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    @media( width < 720px ) {
        flex-direction: column;
        gap: 0;
    }
}

#input-row--plz,
#input-row--ort {
    display: inline-block;
}

#input-row--plz {
    @media( width < 720px ) {
        width: 14rem;
    }
}

#therapyselector--therapiesp,
#therapyselector--therapien {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#input-row--therapiesp,
#input-row--therapien {
    margin-bottom: -.1rem;
    textarea {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.hidden {
    display: none;
}