* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    height: 100%;
}

.font-xxxs {
    font-size: 12px;
    line-height: 1.5;
}
.font-xxs {
    font-size: 14px;
    line-height: 1.5;
}
.font-xs {
    font-size: 15px;
    line-height: 1.5;
}
.font-s {
    font-size: 20px;
    line-height: 1.2;
}
.font-m {
    font-size: 22px;
    line-height: 1.2;
}
.font-l {
    font-size: 25px;
    line-height: 1.2;
}
.font-xl {
    font-size: 25px;
    line-height: 1.1;
}
.font-xxl {
    font-size: 30px;
    line-height: 1.1;
}
.font-xxxl {
    font-size: 30px;
    line-height: 1.1;
}
@media (min-width: 744px) {
    .font-xl {
        font-size: 30px;
    }
    .font-xxl {
        font-size: 40px;
    }
    .font-xxxl {
        font-size: 40px;
    }
}
@media (min-width: 1024px) {
    .font-xs {
        font-size: 16px;
    }
    .font-s {
        font-size: 22px;
    }
    .font-m {
        font-size: 25px;
    }
    .font-l {
        font-size: 35px;
    }
    .font-xl {
        font-size: 45px;
    }
    .font-xxl {
        font-size: 45px;
    }
    .font-xxxl {
        font-size: 60px;
    }
}
@media (min-width: 1512px) {
    .font-xxs {
        font-size: 15px;
    }
    .font-xs {
        font-size: 18px;
    }
    .font-s {
        font-size: 24px;
    }
    .font-m {
        font-size: 35px;
    }
    .font-l {
        font-size: 50px;
    }
    .font-xl {
        font-size: 60px;
    }
    .font-xxl {
        font-size: 70px;
    }
    .font-xxxl {
        font-size: 90px;
    }
}
.defaultPadding {
    padding: 15px 15px;
}
.defaultMargin {
    margin: 15px 15px;
}
@media (min-width: 744px) {
    .defaultPadding {
        padding: 15px 20px;
    }
    .defaultMargin {
        margin: 15px 20px;
    }
}
@media (min-width: 1024px) {
    .defaultPadding {
        padding: 20px 25px;
    }
    .defaultMargin {
        margin: 20px 25px;
    }
}
p {
    margin-top: 0;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 65px;
    align-items: center;
    border-bottom: 1px solid black;
    padding: 0 25px;
    z-index: 1;
}
#content {
    padding-top: 65px;
    min-height: calc(100vh - 74px);
    position: relative;
}
#menu {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    z-index: 1;
}
#menu.visible {
    display: flex;
    gap: 20px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50vw;
    background-color: #eae8e4;
    border-left: 1px solid black;
    min-height: 100vh;
}
@media (min-width: 744px) {
    #menu.visible {
        gap: 25px;
    }
}
#menuTop {
    display: flex;
    gap: 20px;
}
a.menuItem {
    text-decoration: none;
    color: black;
}
a.menuItem.active {
    text-decoration: underline;
}
#footer {
    width: 100vw;
    height: 75px;
    display: flex;
    align-items: center;
    border-top: 1px solid black;
    padding: 0 25px;
}

#placesMapContainer {
    width: 100%;
    height: 100%;
    position: relative;
    height: calc(100vh - 140px);
}
#placesMap {
    width: 100%;
    height: 100%;
}
.timeline-wrapper {
    background: lightgoldenrodyellow;
    position: absolute;
    right: 20px;
    top: 60px;
}

@media (min-width: 1024px) {
    .timeline-wrapper {
        right: unset;
        top: unset;
        left: 20px;
        bottom: 20px;
        height: 40px;
    }
}
#timelineValueWrapper {
    display: grid;
    grid-template-rows: repeat(13, 1fr);
    grid-template-columns: auto;
    gap: 5px;
    justify-items: center;
}
@media (min-width: 1024px) {
    #timelineValueWrapper {
        grid-template-columns: repeat(13, 1fr);
        grid-template-rows: auto;
    }
}
.timelineValue {
}

/* Range */
.timeline-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;

    /* optional: optisch ausblenden */
    opacity: 0;
    cursor: pointer;
}

/* Marker */
.timeline-marker {
    position: absolute;
    top: 5px;
    left: 0;
    height: 4px;
    width: 30px;
    background: red;

    transition: transform 0.5s ease;
    pointer-events: none; /* wichtig */
}
@media (min-width: 1024px) {
    .timeline-marker {
        width: 4px;
        height: 30px;
    }
}
#personDetail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "personHead personHead"
        "personAudio personMap"
        "personText personMap"
        "detailRelations detailRelations"
        "supportBanner supportBanner";
}
#personDetail > * {
    /* border-bottom: 1px solid black; */
    /* border-right: 1px solid black; */
}
#personDetail > *:last-child {
    border-bottom: none;
}
#personHead {
    grid-area: personHead;
    min-height: 20vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "personName personImage"
        "personInfo personImage";
    border-bottom: 1px solid black;
}
#personName {
    grid-area: personName;
}
#personInfo {
    grid-area: personInfo;
}
#personImage {
    grid-area: personImage;
    justify-self: end;
}

#personAudio {
    grid-area: personAudio;
    align-self: start;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#personText {
    grid-area: personText;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
#personMap {
    grid-area: personMap;
    min-height: 100vh;
    border-bottom: 1px solid black;
    position: relative;
}
#personPlaces {
    grid-area: personPlaces;
    border-bottom: 1px solid black;
}
.player {
    width: 400px;
    background: white;
    padding: 20px;
}

button {
    background: #4caf50;
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
}

.timeline-container {
    position: relative;
    margin-top: 20px;
}

input[type="range"] {
    width: 100%;
    writing-mode: vertical-lr;
}
@media (min-width: 1024px) {
    input[type="range"] {
        writing-mode: horizontal-tb;
    }
}

.markers {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.marker {
    position: absolute;
    width: 6px;
    height: 6px;
    background: grey;
    border-radius: 50%;
    transform: translate(9px, -50%);
}
.textMarker {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: grey;
    border-radius: 50%;
}
.custom-marker {
    background: white;
    border: 1px solid black;
    border-radius: 8px;
    padding: 5px 10px;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); */
    transform-origin: bottom center;
    transition:
        transform 0.15s ease,
        opacity 0.2s ease;
    white-space: nowrap;
}

.custom-marker:hover {
    z-index: 10;
}

.marker-name {
}

.marker-count {
}
/* Vollständiger Marker */
.custom-marker .marker-name,
.custom-marker .marker-count {
    display: block;
}

/* Mittlere Zoomstufe: nur Count */
.zoom-medium .custom-marker .marker-name {
    display: none;
}

/* Niedrige Zoomstufe: nur Punkt */
.zoom-low .custom-marker {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    padding: 0;
}

.zoom-low .custom-marker .marker-name,
.zoom-low .custom-marker .marker-count {
    display: none;
}
#placesOverlay {
    position: absolute;
    left: 20px;
    right: 60px;
    top: 80px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
    grid-template-areas:
        "placeContainer"
        "personsContainer";
}

@media (min-width: 1024px) {
    #placesOverlay {
        right: 20px;
        bottom: 75px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            ". personsContainer"
            "placeContainer personsContainer";
        pointer-events: none;
    }
}
#placesOverlay > #placeContainer,
#placesOverlay > #personsContainer {
    background-color: rgba(223, 220, 208, 0.7);
    padding: 10px;
    border-radius: 10px;
}
#placesOverlay > #placeContainer {
    grid-area: placeContainer;
    pointer-events: all;
}
#placesOverlay > #personsContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: personsContainer;
    pointer-events: all;
}
#accordeonBody {
    display: grid;
    grid-template-rows: 0fr; /* collapsed */
    transition: grid-template-rows 0.35s ease;
}
@media (min-width: 1024px) {
    #accordeonBody {
        grid-template-rows: 1fr; /* expanded */
    }
}
#accordeonBody.open {
    grid-template-rows: 1fr; /* expanded */
}
#accordeonBodyInner {
    overflow: hidden;
}
#overlayClose {
    position: absolute;
    right: 20px;
    top: 80px;
}
#overlayYear {
    border: 1px solid black;
    padding: 10px 20px;
    border-radius: 26px;
}
#personsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0 75px;
}
.personGridLinkElement {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b3b3b3;
}
.personGridLinkElement.active {
    color: black;
}
.personGridLinkElement:not(.active) img {
    filter: grayscale(1);
}
a.personName {
    color: inherit;
    text-decoration: none;
}

#alphabetGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 75px;
}
#alphabetTitle,
#eventListTitle {
    padding: 20px 25px 100px;
    border-bottom: 1px solid black;
}
.alphabetGrouper {
    color: #b3b3b3;
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}
.alphabetElement {
    display: flex;
    flex-direction: column;
}
.alphabetSpacer {
    width: 50px;
    height: 50px;
}
.alphabetLinkElement {
    display: flex;
    align-items: center;
    gap: 10px;
}
#placesDetail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "placesDetailTitle placesDetailText"
        "placesDetailFootnotes placesDetailText"
        "detailRelations detailRelations"
        "supportBanner supportBanner";
}
#placesDetailText > p {
    margin: 0;
}
#placesDetailText {
    grid-area: placesDetailText;
    border-bottom: 1px solid black;
}
#placesDetailFootnotes {
    grid-area: placesDetailFootnotes;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    align-self: end;
}
#placesDetailTitle {
    grid-area: placesDetailTitle;
    border-right: 1px solid black;
}
#placesMap {
    opacity: 0;
    transition: opacity 0.5s;
}
.myMarker {
    display: none;
}

#supportBanner {
    background-color: #eae8e4;
    display: flex;
    padding-top: 75px;
    padding-bottom: 75px;
    grid-area: supportBanner;
}
#supportBanner > #supportText {
    flex-basis: 50%;
}
#supportBanner > #supportLinkContainer {
    flex-basis: 50%;
    align-self: center;
    display: flex;
    justify-content: center;
}
#detailRelations {
    grid-area: detailRelations;
    display: flex;
    border-bottom: 1px solid black;
}
#detailRelations > #relationsTitle {
    flex-basis: 50%;
}
#detailRelations > #relationsList {
    flex-basis: 50%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px 25px;
}
.footnotes > dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
}
.footnotes dd {
    margin-left: 0;
}
.footnotes p {
    margin-bottom: 0;
}
#startOverlay {
    position: absolute;
    left: 20px;
    top: 80px;
    right: 20px;
    display: grid;
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "overlayEvents"
        "overlayQuote"
        "overlayTitle"
        "overlayText";
    background-color: white;
    border: 1px solid black;
    border-radius: 40px;
    gap: 50px;
    min-height: calc(100vh - 230px);
}
@media (min-width: 744px) {
    #startOverlay {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "overlayQuote overlayEvents"
            "overlayQuote overlayText"
            "overlayTitle overlayText";
        grid-template-rows: auto;
    }
}

#overlayEvents {
    grid-area: overlayEvents;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-self: start;
    align-items: flex-start;
}
@media (min-width: 744px) {
    #overlayEvents {
        justify-self: end;
        align-items: flex-end;
    }
}
#overlayEvents a {
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 20px;
    color: black;
    text-decoration: none;
}
@media (min-width: 744px) {
    #overlayEvents a {
        text-align: right;
    }
}

#overlayQuote {
    grid-area: overlayQuote;
    align-self: center;
    text-align: center;
    justify-self: center;
}
#overlayTitle {
    grid-area: overlayTitle;
}
@media (min-width: 744px) {
    #overlayTitle {
        align-self: end;
    }
}
#overlayText {
    grid-area: overlayText;
}

@media (min-width: 744px) {
    #overlayText {
        align-self: end;
    }
}
#startOverlayClose {
    position: absolute;
    right: 20px;
    top: 80px;
    border: 1px solid black;
    border-radius: 40px;
    cursor: pointer;
    display: none;
}
#eventList {
    display: flex;
    flex-direction: column;
}
.eventElement {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid black;
}
@media (min-width: 744px) {
    .eventElement {
        grid-template-columns: 1fr auto;
    }
}
.eventElement.past {
    color: #999999;
    border-bottom: 1px solid #999999;
}
.eventElementText {
    display: flex;
    flex-direction: column;
}
.eventLink {
    justify-self: end;
    align-self: end;
    color: black;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid black;
    border-radius: 20px;
}
#interim {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 30px;
}
#interim img {
    max-width: 500px;
    width: 100%;
}