@charset "UTF-8";

/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
*,
*::before,
*::after {box-sizing:border-box;}
a {text-decoration:none; color:inherit; cursor:pointer;}
button {background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure {margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd {margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6 {margin:0; font-size:inherit; font-weight:inherit;}
p {margin:0;}
cite {font-style:normal;}
fieldset {border-width:0; padding:0; margin:0;}

/****** Elad Shechter's Typography *******/
html {
    /* font-size: 1px; */ /* for using REM units */
    font-size: 62.5%;
/*    font-size: 16px;*/
}
body{
/*    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; */
   font-family: sans-serif;
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.3;
   color: #222;
}


/**************************** general ******************************/



:root {
/*    --accent-color: #db7abf;*/
     --accent-color: #da63d5;
}

a:link, a:visited, a:hover, a:active {
    color: var(--accent-color);
}

html {
/*    scroll-behavior: smooth;*/
    -webkit-marquee-increment: 0vw;
}

h1 { font-size: 4.0rem; font-weight: bold;}
h2 { font-size: 2.8rem; font-weight: bold;}
h3 { font-size: 2.2rem; font-weight: bold; margin-bottom: 0.7rem; }
h4 { font-size: 1.8rem; text-decoration: underline;}

.clear {
    clear: both;
}
.small-text{
    font-size: 1.3rem;
}

section {
    /* background-color: #eee; */
    margin: 5vh 0;
}
section > section {
    /* background-color: #ddd; */
    margin: 3vh 0;
}

div#pagecontent {
    z-index: 0;
	margin: 0 auto;
	min-height: 80vh;
    padding: 0 1vw;
}


header {
    margin: 1.5vh 0;
}
header {
    display: grid;
    grid-template-rows: 38% 62%;
    grid-template-columns: 38% 52% 10%;
}
header div  {
    grid-row: 1 / span 2;
    grid-column: 1;
    display: block;
    max-width: 342px;
}
img#logo {
    width: 80%;
    margin: 0 10%;
    border-radius: 16px;
}
header p:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
/*    align-self: last baseline;*/
    align-self: flex-end;
    font-size: 2.0rem;
}
header h1 {
    grid-row: 2;
    grid-column: 2;
/*    align-self: first baseline;*/
    align-self: flex-start;
    color: #999;
}
header a {
    grid-row: 2;
    grid-column: 2;
    align-self: flex-end;
    text-align: right;
}



/*
nav {
    z-index: 100;
    position: sticky;
    top: 0;
}
nav.main ul {
    background-color: #fff;
    border-bottom: 0.2rem solid #EEE;
    padding: 0.5em 2.5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
nav.main ul li {
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0 0.5em;
}
*/
/*
nav.main ul {
  background-color: #FFF;
  border-bottom: 0.2rem solid #EEE;
  padding: 10px 25px;
}
nav.main ul li {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

nav.main ul {
  height: 40px;
  padding: 0 25px;
}
nav.main ul li {
  float: left;
  width: 170px;
  margin-top: 10px;
}
*/


#ueberblick h2 {
    display: flex;
    flex-direction: column;
    margin-left: 1em;
}
#ueberblick h2 span:last-child {
    text-align: right;
    margin-right: 1em;
}

section#konditionen {
    display: grid;
    grid-template-columns: 62% 38%;
    border: 0.2rem solid var(--accent-color);
    border-radius: 1.2rem;
}
#konditionen > ul {
    list-style: disc inside;
    margin: 10px 20px;
}
#konditionen1 {
    grid-column: 1 / 2;
}
#konditionen1 > li:first-child {
    list-style: none;
}
#konditionen1 > li {
    margin-top: 8px;
}
#wohnungen {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
#wohnungen li {
    padding: 0 3rem;
    list-style: none;
    text-align: center;
    border-right: 0.2rem solid #ddd;
}
#wohnungen li:last-child {
    border: none;
}
#preise-anfrage {
    grid-column: 2 /3;
    border-left: 0.2rem solid #ddd;
    padding-left: 1em;
}
#preise-anfrage > li > ul li {
    margin-left: 2em;
}
#buchung {
    display: block;
    text-align: center;
    list-style: none;
    font-size: 2.2rem;
    margin-top: 1.5em;
    border: 0.2rem solid #ddd;
    border-radius: 1rem;
    color: var(--accent-color);
}
#konditionen2 {
    grid-column: 1 / span 2;
    display: flex;
    justify-content: space-around;
}
#konditionen2 li {
    list-style: none;
    padding: 8px;
    border-radius: 5px;
    background-color: #ddd;
}


/* ul#konditionen1 {
    display: block;
    list-style: none;
} */
ul#konditionen1 > li {
/*
    display: inline-flex;
    width: 80%;
*/
/*    line-height: 1.6em;*/
/*    list-style: inside;*/

    /* height: 2em; */
}

/* ul#wohnungen {
    display: inline-block;
    vertical-align: center;
    width: 100%;
}
ul#wohnungen li {
    display: block;
    float: left;
    width: 32%;
    font-size: 0.9em;
}

ul#preise-anfrage {
    display: block;
}
ul#konditionen2 {
  display: block;
}
ul#konditionen2 li {
  display: block;
  float: left;
  width: 150px;
} */

section#beschreibung {
    display: grid;
    grid-template-rows: 3.0rem auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.0rem;
    padding: 2.0rem;
}
section#beschreibung h2 {
    grid-column: 1 / span 3;
    text-align: center;
}
section#beschreibung p:nth-child(2) {
    grid-column: 1 / span 3;
}


section#detailsApm > h2 {
    text-align: center;
    color: #777;
}
section#apms{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* background-color: #FEF; */
    background-color: white;
    align-items: flex-start;
}
section#apms > .apmSec {
    flex: 1 0 26.0rem;
    background-color: white;
    padding: 0 3.2rem;
    padding-right: 2.5rem;
    border: 0.16rem solid #bbb;
    border-radius: 3.2rem;
    margin: 1.5rem 1.5rem;
    /* min-width: 280rem; */
}
section#apms > .apmSec > h3 {
    font-size: 1.9rem;
    color: var(--accent-color);
    border-bottom: 0.1em solid #666;
    margin: 1.9rem 0;
}
section#apms > .apmSec > ul {
    margin: 1.6rem 0;
}
section#apms > .apmSec > ul li {
    list-style: disc;
    font-size: 1.45rem;
    line-height: 2.05rem;
    margin-bottom: 0.65rem;
}
section#apms > .apmSec > ul li > ul {
    margin-top: 0.5em;
    margin-left: 1em;
}
section#apms > .apmSec > ul li > ul li {
    list-style-type: circle;
    font-size: 1.3rem;
}
/* section#detailsApm {
    background-color: white;
}
section#detailsApm > h2 {
    text-align: center;
    color: #666;
}
section#detailsApm > .apmSec {
    display: block;
    float: left;
    width: 70%;
    margin: 16rem 10%;
    padding: 0 32rem;
    background-color: white;
    border: 1.6rem solid #bbb;
    border-radius: 32rem;
}
section#detailsApm >  .apmSec > h3 {
    color: var(--accent-color);
    border-bottom: 0.1em solid #666;
}
section#detailsApm >  .apmSec > ul li {
    color: #333;
    font-size: 0.9em;
    line-height: 1.3em;
    margin-bottom: 0.4em;
}
section#detailsApm >  .apmSec > ul li > ul {
    margin-top: 0.5em;
    margin-left: 1em;
} */

section#sprachen {
    background-color: #eee;
}

section#sprachen > h3 {
    text-align: center;
    /* color: white; */
}
section#sprachen > ul {
    display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    justify-content: center;
}

section#sprachen ul li {
    /* display: inline-block; */
    padding: 1.1rem 1.5rem;
    margin: 0.6rem 1.1rem;
    overflow-wrap: break-word;
    /* min-width: 150rem; */
    border: 0.3rem solid #fff;
    border-radius: 1.2rem;
    color: #333;
    text-align: center;
}
/* section#sprachen > ul {
    display: block;
    width: 80%;
    margin: 1em 10%;
    min-height: 6em;
} */
/* section#sprachen ul li {
    display: inline-block;
    float: left;
    border: 1px solid #fff;
    width: 20%;
    margin: 0.2em 2%;
    overflow-wrap: break-word;
    text-align: center;
    color: #333;
} */


section#karte h2 {
    text-align: center;
    color: #777;
}

section#karte > div#maps-wrapper {
    width: 100%;
    /* height: 50vh; */
    /* min-height: 50vh; */
    /* min-height: 200px; */
    /* min-height: 300px; */
    height: fit-content;
    /* max-height: 90vh; */
    background-color: #ccc;
    /* display: flex; */
}
/* section#karte > div#maps-wrapper:hover {
    background-color: #ddd;
} */
section#karte div#priv-wrapper {
    padding: 13vh 10vw;
}
section#karte #btn_activateCard {
    display: block;
    margin: 2em auto;
    width: 73%;
    height: 5em;
    font-size: 2rem;
    background-color: #fff;
}
.text-center {
    text-align: center;
}

#map-responsive-wrapper{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
#map-responsive-wrapper iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
/* section#karte iframe {
    width: 100%;
    height: 100%;
} */


section > div.ph {
    min-height: 300px;
}

footer ul {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2.0rem;
}

section#buchung-anfragen form {
    width: 80%;
    margin: 0 auto;
}

section#buchung-anfragen > form > div {
    margin-bottom: 1em;
}

#nachricht {
    width: 100%;
    height: 10em;
    resize: none;
    border: 0.2em solid #DDD;
    outline: none;
    overflow: auto;
}

#abschicken {
    margin: 0 auto;
    display: block;
    padding: 0.2em;
    font-weight: bold;
    border: 0.1em solid var(--accent-color);
    border-radius: 1em;
    background-color: #eee;
}


@media screen and (min-width: 320px) {
    html {
/*        font-size: 35%;*/
/*        font-size: calc(16px + 6 * ((100vw - 320px) / 680));*/
        /* font-size: calc(5px + 6 * ((100vw - 320px) / 680)); */
        font-size: calc(6px + 10 * ((100vw - 320px) / 680));
    }
    header {
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 100;
    }
    #main_nav:target {
        z-index: 100;
        display: block;
        width: 100%;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        margin-top: 0;
    }
    #main_nav:target ul li {
        margin: 1em;
    }
    #main_nav {
        display: none;
        position: fixed;
/*
        position: absolute;
        top: 0;
        left: 0;
*/
        background: #fff;
    }
/*
      .with_nav main_nav {
        z-index: 100;
        display: block;
        width: 100%;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        margin-top: 0;
    }
*/
    header div:last-child {
        grid-row: 1 / span 2;
        grid-column: 3 / 4;
    }
    .access_aid {
        display: block;
/*
        position: absolute;
        top: 0;
        right: 0;
*/
        width: 40px;
        height: 0;
        padding-top: 40px;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 0.5em;
        background: white 10px 10px / 20px 20px no-repeat;
    }
    #access_nav {

        background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
        background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
    }
    #access_top {
        background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
    }
}

@media screen and (min-width: 600px) {
    html {
/*        font-size: 62.5%;*/
    }
    header {
        position: static;
        z-index: 0;
    }
    #main_nav {
        display: block;
        position: sticky;
    }
    .access_aid {
        display: none;
    }
    nav {
        z-index: 100;
        position: sticky;
        top: 0;
    }
    nav.main ul {
        background-color: #fff;
        border-bottom: 0.2rem solid #EEE;
        padding: 0.5em 2.5em;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    nav.main ul li {
        font-size: 1.8rem;
        font-weight: bold;
        padding: 0 0.5em;
    }

}

@media screen and (min-width: 900px) {

     html {
        font-size: 62.5%;
    }

    div#pagecontent {
        width: 900px;
    }

}