/*
Theme Name:     Bodo
Author:         2code
Description:    Bodo
Version:        1.0
License:        GNU General Public License v2 or later
*/

@font-face {
    font-family: "Natom Pro, Bold";
    src: url("assets/fonts/FS-WebFonts-814051487/Fonts/7595386/a25ed403-4fb9-4afa-8abb-f69fc246e3a1.woff2") format("woff2");
    src: url("assets/fonts/FS-WebFonts-814051487/Fonts/7595386/83f0c3c2-7ad5-480e-be07-0de447452544.woff") format("woff");
}



@font-face {
    font-family: 'Avenir Heavy';
    src: url("assets/fonts/avenir/Monotype-AvenirNextLTPro-Heavy.otf") format("opentype");
}

@font-face {
    font-family: 'Avenir Bold';
    src: url("assets/fonts/avenir/Monotype-AvenirNextLTPro-Bold.otf") format("opentype");
}

@font-face {
    font-family: 'Avenir Regular';
    src: url("assets/fonts/avenir/Monotype-AvenirNextLTPro-Regular.otf") format("opentype");
}

@font-face {
    font-family: 'Avenir Medium';
    src: url("assets/fonts/avenir/Linotype-AvenirNextLTPro-Medium.otf") format("opentype");
}

@font-face {
    font-family: 'Avenir Demi';
    src: url("assets/fonts/avenir/Monotype-AvenirNextLTPro-Demi.otf") format("opentype");
}

@media (min-width:1200px) {
    .container {
        max-width: 1440px;
    }

}



:root {
    --bodo-blau: #00305B;
    --bodo-gelb: #FFE92E;
    --bodo-rot: #EA5354;
    --bodo-gruen: #2B9749;
    --bodo-orange: #B3A400;
    --main-font: 'Avenir Medium';
    --main-font-size: 16px;
    --main-line-height: 28px;
    --main-font-bold: 'Avenir Bold';
    --main-font-demi: 'Avenir Demi';
    --main-font-regular: 'Avenir Regular';
    --special-font: 'Natom Pro, Bold';
    margin: 0;
}

main {
    position: relative;
}

html {
    margin: 0;
}

.row {
    float: left;
    width: 100%;
}

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

body {
    font-family: var(--main-font-regular);
    font-size: var(--main-font-size);
    line-height: var(--main-line-height);
    color: var(--bodo-blau);
    background-color: #FFF;
}

h1 {
    font-family: var(--main-font-demi);
    /* font-size: 290px; */
    /* font-size: 3.776vw; */
    font-size: min(6.5vh, 3.776vw);
    line-height: 100%;
    color: black;
    margin-bottom: 0;

}

h2 {
    font-family: var(--main-font-demi);
    /* font-size: 200px; */
    /* font-size: 2.1vw; */
    /* font-size: clamp(1.6vw, 1.7vw, 2.1vw); */
    font-size: clamp(1.8vw, 2vw, 2.2vw);
    line-height: 100%;
    color: black;
    /* margin-top:50px; */
    margin-top: 0.65vw;


    svg {
        /*color:#D9D9D9 !important;*/
        margin-left: 0.5vw !important;
        font-size: 2vw !important;
        margin-bottom: 0.4vw;
    }

}

.title-wrapper h2 {
    text-align: right;
}

.title-wrapper h3 {
    margin-top: 0.65vw;
}

.title-wrapper h2,
.title-wrapper h3 {
    display: flex;
    align-items: center;
}

h3 {
    font-family: var(--main-font-regular);
    /* font-size: 120px; */
    font-size: 1.563vw;
    line-height: 120%;
    color: black;
    text-align: center;

}

.col-md-2 h3 {
    display: flex;
}

h4 {
    font-family: var(--main-font-regular);
    /* font-size: 24px; */
    font-size: 0.313vw;
    /* line-height:32px; */
    line-height: 0.417vw;
    color: var(--bodo-blau);
}

h5 {
    font-family: var(--main-font-regular);
    /* font-size: 20px; */
    font-size: 0.260vw;
    /* line-height:28px; */
    line-height: 0.365vw;
    color: var(--bodo-blau);
}


.title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

section {
    float: left;
    width: 100%;

}

main {
    float: left;
    width: 100%;

}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Gesamthöhe = Viewport */
}

main {
    flex: 1;
    /* nimmt alles zwischen header/footer */
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* diese Section füllt den Rest */
.abfahrtsmonitor-wrapper {
    flex: 1;
    /* streckt sich */
    display: flex;
    /* falls du innen auch Layout brauchst */
    flex-direction: column;
}

/* Footer bleibt fit-content */
.barrierefrei-hinweis {
    flex-shrink: 0;
    /* Höhe = Inhalt */
}


.abfahrtsmonitor-wrapper {
    float: left;
    width: 100%;
    padding-top: 1.63vw;
    padding-bottom: 1.63vw;
    padding-left: 2.86vw;
    padding-right: 2.86vw;
    /* max-height: calc(100vh - 8.63vh); */
    /* height: calc(100vh - 8.63vh); */
    overflow: hidden;
}

.abfahrtsmonitor {
    float: left;
    width: 100%;
    /* padding-top:125px;
    padding-left:220px;
    padding-right:220px;
    padding-bottom:125px; */

    display: flex;
    align-items: stretch;
    gap: 10vh;
    height: 100%;
}

.half {
    width: 50%;
    float: left;
    display: flex;
    flex-direction: column;

}

.half.has-image{
    flex-grow: 1;
}

@media screen and (orientation: portrait){
    .half.has-image .left-wrapper{
        background-position: top !important;
    }
}

.half>.row.take-space {
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.half img.ad {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 37vw);
    object-fit: contain;
    object-position: center;
}

.full {
    width: 100%;
    float: left;
}

table {
    /* margin-top:265px; */
    /* margin-top: 3.45vw; */
    margin-top: 2vh;
    float: left;
    width: 100%;
}

th {
    /* font-size:100px; */
    font-size: 1.302vw;
    line-height: 100%;
    font-family: var(--main-font-regular) !important;
    font-weight: normal;
    /* padding-bottom:73px !important; */
    padding-bottom: 0.95vw !important;
}

tr {
    border: 0 !important;

}

td {
    /* font-size:110px; */
    font-size: 1.432vw;
    font-weight: normal;
    line-height: 100%;
    border: 0 !important;
    vertical-align: middle;

}

tr td:nth-child(1) {
    /* font-size:100px; */
    font-size: 1.302vw;
    vertical-align: middle;
    /* padding-top:55px !important;
    padding-bottom:55px !important; */
    padding-top: 0.72vw !important;
    padding-bottom: 0.72vw !important;

}


tr td:nth-child(2),
th:nth-child(2),
tr td:nth-child(3),
tr td:nth-child(4),
th:nth-child(3),
th:nth-child(4) {

    /* padding-left:195px; */
    padding-left: 2.54vw;
    font-family: var(--main-font-demi);

}

tr td:nth-child(5) {
    /* padding-left:165px; */
    padding-left: 2.15vw;
}

tr td:nth-child(4) {
    font-family: var(--main-font-regular);
}

.demi-font {
    font-family: var(--main-font-demi) !important;
    font-weight: normal !important;
}

td span {
    float: left;
    width: 100%;
    text-align: center;
    /* padding-bottom:62.5px;
    padding-top:62.5px;
    padding-left:64px;
    padding-right:64px;
    border-radius:35px; */
    padding-top: 0.81vw;
    padding-bottom: 0.81vw;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 0.46vw;

}

/* .half:last-child h3
{
    margin-top:1vw;
} */

h3 img {
    height: 1em;
    margin-right: 0.8vh;
}

h3 span {
    margin-top: 0.25vh;
    float: right;
}

.fussweg img{
    filter: brightness(0);
}

/* .fussweg
{
    padding-top:12px;
} */

.barrierefrei {
    position: absolute;
    color: white;
    background-color: #0088cf;
    float: left;
    /* font-size: 15px;
    width: 30px;
    height: 30px; */
    font-size: 1vw;
    width: 2vw;
    height: 2vw;
    border-radius: 100%;
    text-align: center;
    padding: 0;
    padding-top: 0;
    /* margin-left: -15px; */
    margin-left: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.half .barrierefrei {
    margin-left: -1vw;
}

.ems td span {
    text-align: left;
    font-size: 1.2vw;
    padding: 0;
}

.ems td:nth-child(1) {
    padding-top: 0 !important;
}

.barrierefrei-hinweis {
    /* position: absolute; */
    position: relative;
    color: white;
    float: left;
    width: 100%;
    /* bottom: -40px; */
    /* bottom: -2.5vw;
    left: 15px; */
    z-index: 200;
    font-size: min(1.432vw, 24px);
    display: flex;
    align-items: center;
    /* margin-top: 10px; */
    margin-top: 0.25vw;
    background-color: var(--bodo-blau);
    padding: 1vw 3vw;

    .barrierefrei {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    p {
        margin-bottom: 0;
        margin-left: 1vw;
        line-height: normal;
        margin-top: 4px;
    }

}

.left-wrapper {
    max-height: calc(100vh - 12vw);
}

body.page-template-template-haltestellenaushang {
    main {
        border: 40px solid var(--bodo-blau);
        border-bottom: none;
    }

    section.abfahrtsmonitor-wrapper {
        height: fit-content;
        max-height: unset;
        padding-left: 0;
        padding-right: 0;
    }

    .barrierefrei-hinweis {
        bottom: unset;
        left: unset;
        gap: 5px;
        position: relative;
        background: var(--bodo-blau);
        padding: 7px 3vw;
    }

    .title-wrapper.full,
    .col-md-12 {
        padding-left: 3vw !important;
        padding-right: 3vw !important;
    }

    .row {
        margin: 0;
    }
}

@media(max-width: 992px) {

    main{
        height: 100dvh;
    }

    .abfahrtsmonitor-wrapper {
        overflow-y: auto;
           padding-left: 0;
        padding-right: 0;
    }

    .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .title-wrapper.full,
    .title-wrapper {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    th{
        border-color: black;
        border: none !important;
    }
    td{
        border: none !important;
    }
    thead tr{
        border-bottom: 2px solid lightgrey !important;
    }

    .table-wrap {
        overflow-x: auto;
        padding-left: 18px;
        margin-right: 18px;
    }

    h1 {
        font-size: 30px;
        padding: 0 10px;
        line-height: normal;
    }

    h2 {
        font-size: 14px;
        line-height: normal;
    }

    h3 {
        font-size: 10px;
        line-height: normal;
    }

    .ems td span {
        font-size: 8px;
        line-height: normal;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    img.logo {
        width: 100px !important;
    }

    th,
    tr,
    tr td:nth-child(2),
    th:nth-child(2),
    tr td:nth-child(3),
    tr td:nth-child(4),
    th:nth-child(3),
    th:nth-child(4),
    p,
    span {
        font-size: 10px;
        line-height: normal;
    }

    tr td:first-child {
        padding-left: 0;
    }

    tr td:last-child {
        padding-right: 0;
    }

    th:first-child {
        padding-left: 0;
    }

    tr th {
        padding-bottom: 2vw !important;
        padding-top: 2vw !important;
    }

    tbody tr:first-child td {
        padding-top: 2vw !important;
    }

    td span:not(.barrierefrei) {
        padding: 4px 8px;
    }

    .barrierefrei-hinweis {
        padding: 7px calc(2.86vw + 1.5rem);
    }

    .barrierefrei {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-left: -15px !important;

        svg {
            height: 10px;
            width: auto !important;
            padding: 0 5px;
        }
    }

    .half>.row.take-space {
        justify-content: start;
    }

    body.page-template-default {
        .abfahrtsmonitor {
            flex-direction: column;
            flex: 1;
            gap: 2vh;
        }

        .half {
            width: 100%;
            /* flex: 1; */
            display: flex;
            flex-direction: column;
        }
    }

    body.page-template-template-haltestellenaushang {

        main {
            border: 20px solid var(--bodo-blau);
            border-bottom: none;
        }

        .col-md-12 {
            overflow: scroll;
        }

        .col-md-12 {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
    }
}