@font-face { font-family: Lineal_Bold; src: url('fonts/lineal/Lineal-Bold.otf'); } 
@font-face { font-family: Lineal_Heavy; src: url('fonts/lineal/Lineal-Heavy.otf'); } 
@font-face { font-family: Lineal_Black; src: url('fonts/lineal/Lineal-Black.otf'); } 
@font-face { font-family: Lineal; src: url('fonts/lineal/Lineal-Regular.otf')}
@font-face {
    font-family: OpenSans;
    src: url(fonts/OpenSans/OpenSans-VariableFont_wdth\,wght.ttf);
}

/* BASIC STYLING */

body {
    background-color: #470B7B;
    margin: 0;
}


h1 {
    font-size: 800%;
    margin: 0;
    margin-left: 100px;
    transform: translateY(50px);
    text-shadow: 0px 15px #470B7B;
    font-family: Lineal_Bold;
    color: #FFED00;
    font-weight: normal;
    /* font-feature-settings: "ss01"; */
}

.clickable {
    cursor: pointer;
    user-select: none;
}

.logo {
    a {
        color: #FFED00;
        text-decoration: none;
        transform: translate(25px,25px);
        display: block;
        width: max-content;
    }
    font-size: 400%;
    font-family: Lineal_Black;
    font-feature-settings: "ss01";
}

/* ---------- HELPER STYLES (REUSABLE) ------------------- */

/* Dreiecke (Pfeile im Titel) */

.triangle-base {
    position: relative;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
}
.triangle-right {
    border-left: 40px solid #B6A7D2;
    margin-left: 10px;
    margin-right: 15px;
}
.triangle-right-2 {
    border-left: 40px solid #B6A7D2;
    margin-left: 15px;
    margin-right: 15px;
}
.triangle-left {
    border-right: 40px solid #B6A7D2;
    margin-right: 10px;
    margin-left: 15px;
}

/* Buttons im Titel (sichtbar bei hover) */

.buttons-base {
    font-size: 18%;
    line-height: 130%;
    opacity: 0;
    transition: all 0.1s ease-out;
}

.buttons-right {
    transform: translateX(50px);
}

.buttons-left {
    transform: translateX(-50px);
    text-align: right;
}

.buttons-base a {
    text-decoration: none;
}

.buttons-base p {
    margin: 0;
}

.main_button {
    border: solid #FFED00;
    background-color: #FFED00;
    color: #470B7B;
}

.search-box {
    display: block;
    border: solid #FFED00 5px;
    color: #FFED00;
    font-size: 250%;
    background-color: #470B7B;
    width: 300px;
    padding: 20px;
    padding-bottom: 13px;
    font-family: Lineal_Bold;
    transform: translate(-50px, -50px);
    
}
.search-box::placeholder{
    opacity: 1;
    color: #FFED00;
}
.search-form {
    /* transform: translateY(-100px); */
    float: right;
    
}
input:focus {
  outline: none;
}

/* Website Überschrift + einzelne Zeilen dieser Überschrift */

.title {
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    font-family: Lineal_Bold;
    font-size: 1000%;
    line-height: 78%;
    cursor: default;
    width: 1200px;
    color: #FFED00;
}
.title_1 {
    /* bisschen stärkere Schriftart */
    font-family: Lineal_Black;
    height: 100%;
    font-feature-settings: "ss01";
}
.title_2 {
    /* brauche flex, um Links dynamisch daneben anzeigen zu können*/
    display: flex;
}
.title_2:hover .buttons-right{
    opacity: 1; 
    transform: translateX(0); 
}
.title_3 {
    padding-left: 62px;
    display: flex;
}
.title_3:hover .buttons-left{
    opacity: 1; 
    transform: translateX(0); 
}
.title_4 {
    display: flex;
    padding-left: 140px;
    /* line-height: 60%;*/
}
.title_4:hover .buttons-right{
    opacity: 1; 
    transform: translateX(0); 
}
.title_5 {
    display: flex;
    padding-left: 300px;
}
.title_5:hover .buttons-base{
    opacity: 1; 
    transform: translateX(0); 
}
.footer {
    font-family: Lineal_Bold;
    font-size: 300%;
    margin: 20px;
    text-align: center;
    a {
        color:#FFED00;
        text-decoration: none;
        margin-left: 5%;
        margin-right: 5%;
    }
}

.h1-flex {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.horizontal-scroll {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    a {
        text-decoration: none;
        color:#FFED00;
    }
}

.h-card {
  max-width: 1000px;
  margin: 25px;
  margin-top: 0px;
  flex-basis: 1000px;
  flex-grow: 0;
  flex-shrink: 0;
  font-family: OpenSans;
  font-weight: 450;
}
.h-card img {
    width: 100%;
}
.preview-text {
    font-size: 200%;
    margin-top: 10px;
    h2 {
        margin: 0
    }
}

.date {
    text-align: right;
    margin-right: 10px;
    font-size: 120%;
    font-weight: 600;
    margin-top: 20px;
}

.calendar_table{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size:250%;
    white-space-collapse: collapse;
    font-family: OpenSans;
    .first_row {
        padding-top: 50px;
        font-family: Lineal_Bold;
        font-size: 150%;
    }
    .first_row_v2 {
        padding-top: 20px;
        font-family: Lineal_Bold;
        font-size: 150%;
    }
    .small_row {
        width: calc(100% - 160px);
        margin-left: auto;
        margin-right: auto;
        background-color: #E3D417;
        padding-left: 30px;
        padding-right: 30px;
    }
    .big_row {
        background-color: #FFED00;
        padding-left: 80px;
        padding-right: 80px;
    }
    .row {
        display: flex;
    }
    .calendar_data {
        color: #470B7B;
        display: block;
    }
    a {
        color: #470B7B;
        text-decoration: none;
    }
    .col1 {
        width: 50%;
    }
    .col2 {
        width: 35%;
    }
    .col3 {
        width: 15%;
        text-align: right;
    }
    .title_col1 {
        width: 50%;
    }
    .title_col2 {
        width: 50%;
        text-align: right;
    }
    .calendar_footer {
        width: 100%;
        text-align: right;
        a {
            color:#470B7B;
        }
    }
}



.document_header {
    text-align: right;
    margin-right: 20%;
}

.document_body {
    background-color: #F7F7F7;
    .document_text {
        font-size: 160%;
    }
}

.base_body {
    padding: 100px;
    display: flex;

    .document_text {
        
        font-family: OpenSans;
        width:100% ;
    }
    .sidebar {
        width: max-content;
        padding-left: 5%;
        font-size: 200%;
        font-family: OpenSans;
        text-align: right;
        margin-left: auto;
        white-space: nowrap;
        color:#470B7B;
        h2 {
            text-shadow: 0px 5px #FFED00;
            font-family: Lineal_Bold;
        }
        a {
            color: #470B7B;
            text-decoration: none;
            font-weight: 600;
        }
        img {
            width: 80px; 
            height: 80px;
        }
    }
}

.document_images {
    background-color: #B6A7D2;
    h1 {
        color:#470B7B;
        text-shadow: 0px 15px #FFED00;
    }
}

.location_body {
    background-color: #B6A7D2;
    color: #470B7B;
    /* padding-bottom: 0; */
    h2 {
        text-shadow: 0px 5px #FFED00;
        color: #470B7B;
        font-family: Lineal_Bold;
    }
    .document_text {
        font-size: 200%;
    }
    .calendar_table {
        margin: 0;
        width: 100%;
    }
    
}

.scroll_right {
    margin: 0;
    margin-right: 100px;
}
.scroll_left {
    margin: 0;
    margin-right: 150px;
}

.search_list {
    max-width: 2400px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    a {
        text-decoration: none;
    }
}

.search_card {
    margin: 20px;
    font-size: 160%;
    color: #FFED00;
    font-family: OpenSans;

    .search_type_indicator {
        font-family: Lineal_Black;
        font-size: 200%;
        color: #FFED00;
        text-shadow: 0px 5px #470B7B;

        position: absolute;
        left: 25px;
        top: -51px; 
        
    }

    .search_card_inner {
    border: #FFED00 5px solid;
    border-radius: 10px;
    background-color: #470B7B;
    padding: 10px;
        img {
            width: 50% ;
            margin-right: 10px;
            float: left;
        }
        h2 {
            color: #FFED00;
            text-shadow: none;
            margin: 0;
            /* margin-bottom: 10px; */
            font-size: 150%;
        }
    }
    .search_type_indicator_wrapper {
        position: relative; 
        width: 0; 
        height: 0; 
        float: left;
    }
}