/* font-awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /* color vars */
    --color-main: #2c4c62;
    --color-main-inverse: #fff;

    --color-spot: #ef7d00;

    --gray-dark: #8c9fb2;
    --gray-light: #f4f4f4;

    /* marker colors */
    --marker-bemittelt: #2c4c62;
    --marker-unbemittelt: #af1918;
    --marker-arm: #74a202;
    --marker-sehr-arm: #ef7d00;
    --marker-non-jewish: #ffde0a;

    /* TODO: on newer browsers use 3.2lh */
    --nav-height: 4.5rem;
    --container-padding: 16px;
}

/* reset, see https://plainvanillaweb.com/pages/styling.html */
:root {
    box-sizing: border-box;
    line-height: 1.4;
    /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* bootstrap like containers */
.container {
    box-sizing: border-box;
    width: 100%;
    margin-right: auto;
    margin-left: auto;

    padding: var(--container-padding);

    /*
    $container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1320px
    );
    */
    --sm: 540px;
    --md: 720px;
    --lg: 960px;
    --xl: 1140px;
    --xxl: 1320px;
}

/*
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  );
*/
@media screen and (min-width: 576px) {
    .container {
        max-width: var(--sm);
    }
}

@media screen and (min-width: 768px) {
    .container {
        max-width: var(--md);
    }
}

@media screen and (min-width: 992px) {
    .container {
        max-width: var(--lg);
    }
}

@media screen and (min-width: 1200px) {
    .container {
        max-width: var(--xl);
    }
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: var(--xxl);
    }
}

@media screen and (max-width: 575px) {
    .hidden-mobile {
        display: none;
    }
}

/* local overrides */
html {
    font-family: 'Open Sans', sans-serif;
    /* reset */
    margin: 0;
    padding: 0;

    background-color: var(--gray-light);
    /* anchor offset for fixed header */
    scroll-padding-top: var(--nav-height);
}

h1 {
    font-size: 32px;
    margin-bottom: 0.2lh;
}

p {
    margin-bottom: 0.5rem;
}

ul>li {
    list-style-position: inside;
}

a,
a:visited {
    color: var(--color-main);
    text-decoration: none;
}

a.color-spot,
a.color-spot:visited {
    color: var(--color-spot);
}

nav,
footer {
    background-color: var(--color-main);
    color: var(--gray-light);
}

footer {
    padding: var(--container-padding);
    position: relative;
    text-align: right;
    min-height: 64px;
    line-height: 64px;
}

footer #ghi-logo {
    position: absolute;
    left: 16px;
    height: 64px;
    width: auto;
}

footer a,
footer a:visited {
    color: var(--gray-light);
}

nav {
    /* fixed position */
    height: var(--nav-height);
    overflow: hidden;
    /* Set the navbar to fixed position */
    position: fixed;
    /* Position the navbar at the top of the page */
    top: 0;
    /* Full width minus scroller */
    width: calc(100vw - (100vw - 100%));

    /* on top of leaflet */
    z-index: 2000;
}

nav>ul {
    height: calc(var(--nav-height));
    padding-bottom: 8px;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

nav>ul>li {
    line-height: 24px;
    font-size: 20px;
}

nav>ul>li a,
nav>ul>li a:visited {
    display: inline-block;
    padding: var(--container-padding);
    font-weight: bold;
    text-decoration: none;
    color: var(--gray-light);
}

#lng-selector {
    position: absolute;
    right: var(--container-padding);
    top: 4px;
}

#lng-selector a,
#lng-selector a:visited {
    color: var(--gray-light);
}

#lng-selector a.selected {
    font-weight: bold;
}

section#map-section {
    background-color: var(--gray-dark);
}

/* tom-select */
.ts-dropdown {
    /* on top of leaflet */
    z-index: 1950 !important;
}

.ts-control {
    min-height: 3rem;
    /*
    min-width: 20em;
    width: 25%;
    */
}

ul.filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style-type: none;
    color: var(--color-main);
}

ul.filter>* {
    flex: 1;
}

/* sections */
#home {
    margin-top: calc(var(--nav-height) - 2px);
}

.button,
.button:visited {
    background-color: var(--color-spot);
    border-radius: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--gray-light);
    font-size: 16px;
}

#map {
    background-color: var(--gray-dark);
    width: 100%;
    height: calc(100vh - 120px);
    min-height: 480px;

}

#legend {
    background-color: var(--gray-light);
    color: var(--color-main);
}

#about {
    background-color: var(--color-main-inverse);
}

#about a {
    /* for safari */
    word-wrap: break-word;
}

#critic {
    background-color: var(--gray-light);
}

#participate {
    background-color: var(--gray-dark);
}

#contact {
    background-color: var(--gray-light);
}

#literatur {
    background-color: var(--gray-dark);
}

.legend-below {
    margin-bottom: 10px;
    margin-top: 10px;
    color: var(--color-main);
}

.legend-below h4 {
    margin-bottom: 8px;
    color: var(--color-main);
}

/* marker*/
.fa.small {
    padding-top: 4px;
    font-size: 60%;
}

.fa.fa-number.small {
    padding-top: 2px;
    font-size: 11px;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 700;
}

/* formatting title and text */
.title {
    font-size: 20px;
    color: var(--color-main);
    margin-top: 20px;
}

h2.title {
    font-size: 32px;
}

.text {
    color: var(--color-main);
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 30px;
}


/* Statistik block */
@media screen and (min-width: 992px) {
    /* move statistic block on larger screens */
    .stats.leaflet-control {
        margin-right: 100px;
        margin-top: 100px;
    }
}

.stats.leaflet-control {
    max-width: 250px;
    background-color: var(--color-main-inverse);
    padding: 8px;
    border-radius: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--color-main);
    box-shadow: 0 0 2em rgb(0 0 0 / .3);
}

.stats.leaflet-control h3 {
    font-size: 20px;
}

.stats.leaflet-control h4 {
    font-size: 13px;
    padding-bottom: 4px;
}

.stats.leaflet-control p {
    font-size: 16px;
    background-color: var(--color-main-inverse);
    padding: 8px;
    border-radius: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--color-main);

    border-width: 2px;
    border-style: solid;
    border-color: var(--color-spot);
}

/* Legende */
.legend {
    display: inline-block;
    padding-right: 8px;
    margin-bottom: 16px;
}

.legend .marker {
    float: left;
    position: relative;
    transform: scale(.5);
    margin-top: 8px;
    margin-left: 2px;
    width: 24px;
    height: 32px;
    color: var(--color-main);
}

.box {
    display: inline-block;
    margin-left: 2px;
    margin-right: 6px;
    width: 12px;
    height: 12px;
}

/* collapsible */
.collapsible {
    background-color: var(--color-spot);
    border: none;
    border-radius: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    color: var(--gray-light);
    cursor: pointer;
    width: 30%;
    font-size: 20px;
}

.collapsible:after {
    content: '\002B';
    color: var(--gray-light);
    font-weight: bold;
    float: right;
}

.active:after {
    content: "\2212";
}

.content {
    display: none;
    background-color: var(--color-main-inverse);
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px;
    color: var(--color-main);
}

/* contact formular, Attention: also overwrite input family search! */
input[type=text],
select,
textarea {
    padding: 8px;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    font-size: 16px;
    border: none;
    outline: none;
}

form select,
form textarea {
    width: 50%;
}

form button {
    cursor: pointer;
    border: none;
}

/* icon in startsection */
.icon_container {
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
    margin-bottom: 40px;
}

.icon_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.icon {
    background-color: var(--color-main-inverse);
    color: var(--color-main);
    aspect-ratio: 1/1;
    width: 200px;
    border-radius: 8px;
    padding-top: 22px;
    padding-bottom: 100px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
    font-size: 14px;
    /* same height */
    align-self: stretch;

    text-align: center;

    position: relative;
}

.icon a img {
    width: 80%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--color-spot);
}

.icon h2 {
    padding-top: 20px;
    padding-bottom: 10px;
}

.icon a img:hover {
    opacity: 0.8;
}

.icon p {
    font-size: 14px;
    margin-left: 10px;
    margin-right: 10px;
}

.icon a.symbol img {
    position: absolute;
    border: none;
    width: 55px;
    height: auto;
    bottom: 22px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

/* Cover overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    */
    display: flex;
    justify-content: center;
    align-items: center;
    /* on top of map */
    z-index: 2000;
}

.container-modal {
    margin-top: 80px;
    position: fixed;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    border-radius: 8px;
    visibility: visible;
    box-shadow: 0 0 4em rgb(0 0 0 / .3);
}

.modal {
    color: var(--color-spot);
    font-size: 16px;
    border-radius: 8px;
    padding-top: 15px;
    padding-bottom: 40px;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
    text-align: center;
    line-height: 200%;
    border: 2px solid var(--color-spot);
}

.modal-button {
    color: var(--color-spot);
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    position: absolute;
    top: 0px;
    right: 10px;
}

/* popup while clicking on Dresden 1835 */
.popup-link {
    color: --color-main;
    cursor: pointer;
}