/* ANBITA Radio Navigation – Reihen- und Farbfix v211
   Desktop/Tablet ab 561 px: alle vier Kacheln in einer Reihe, kompakter Abstand.
   Mobil und App: ebenfalls alle vier Kacheln in einer Reihe, kleiner und flacher. */

/* Farben der vier Hauptkacheln auf allen Geräten */
body .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(1),
body .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(1),
body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(1),
body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(1){
    background:#d92525!important;
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
}
body .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(2),
body .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(2),
body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(2),
body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(2){
    background:#f0c62b!important;
    color:#111111!important;
    -webkit-text-fill-color:#111111!important;
}
body .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(3),
body .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(3),
body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(3),
body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(3){
    background:#3568d4!important;
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
}
body .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(4),
body .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(4),
body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(4),
body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(4){
    background:#24a651!important;
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
}
body .onairbase-surface .ob-main-nav > .ob-nav-tile *,
body .radio-entry-page .ob-main-nav > .ob-nav-tile *,
body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile *,
body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile *{
    color:inherit!important;
    -webkit-text-fill-color:inherit!important;
}

/* Desktop und Tablet */
@media (min-width: 561px) {
    body .onairbase-surface .ob-main-nav,
    body .radio-entry-page .ob-main-nav,
    body.anbita-app .onairbase-surface .ob-main-nav,
    body.anbita-app .radio-entry-page .ob-main-nav,
    body .onairbase-surface .ob-hero-stack .ob-main-nav,
    body .radio-entry-page .ob-hero-stack .ob-main-nav,
    body.anbita-app .onairbase-surface .ob-hero-stack .ob-main-nav,
    body.anbita-app .radio-entry-page .ob-hero-stack .ob-main-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        width: fit-content !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body .onairbase-surface .ob-main-nav > .ob-nav-tile,
    body .radio-entry-page .ob-main-nav > .ob-nav-tile,
    body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile,
    body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 128px !important;
        width: 128px !important;
        max-width: 128px !important;
        flex: 0 0 128px !important;
        margin: 0 !important;
    }

    body .onairbase-surface .ob-site-shell-header > .ob-ad-wrap,
    body .radio-entry-page .ob-site-shell-header > .ob-ad-wrap,
    body.anbita-app .onairbase-surface .ob-site-shell-header > .ob-ad-wrap,
    body.anbita-app .radio-entry-page .ob-site-shell-header > .ob-ad-wrap {
        margin-top: 30px !important;
    }
}

/* Mobile Browser und App: alle vier Kacheln in einer Reihe, deutlich kompakter */
@media (max-width: 560px) {
    body .onairbase-surface .ob-main-nav,
    body .radio-entry-page .ob-main-nav,
    body.anbita-app .onairbase-surface .ob-main-nav,
    body.anbita-app .radio-entry-page .ob-main-nav,
    body .onairbase-surface .ob-hero-stack .ob-main-nav,
    body .radio-entry-page .ob-hero-stack .ob-main-nav,
    body.anbita-app .onairbase-surface .ob-hero-stack .ob-main-nav,
    body.anbita-app .radio-entry-page .ob-hero-stack .ob-main-nav {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body .onairbase-surface .ob-main-nav > .ob-nav-tile,
    body .radio-entry-page .ob-main-nav > .ob-nav-tile,
    body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile,
    body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile {
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-height: 68px !important;
        padding: 8px 5px !important;
        border-radius: 14px !important;
        gap: 4px !important;
        font-size: .84rem !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    body .onairbase-surface .ob-main-nav > .ob-nav-tile .ob-nav-icon,
    body .radio-entry-page .ob-main-nav > .ob-nav-tile .ob-nav-icon,
    body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile .ob-nav-icon,
    body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile .ob-nav-icon {
        font-size: 1.05rem !important;
        line-height: 1 !important;
    }

    body .onairbase-surface .ob-main-nav > .ob-nav-tile .ob-nav-label,
    body .radio-entry-page .ob-main-nav > .ob-nav-tile .ob-nav-label,
    body.anbita-app .onairbase-surface .ob-main-nav > .ob-nav-tile .ob-nav-label,
    body.anbita-app .radio-entry-page .ob-main-nav > .ob-nav-tile .ob-nav-label {
        font-size: .80rem !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }

    body .onairbase-surface .ob-site-shell-header > .ob-ad-wrap,
    body .radio-entry-page .ob-site-shell-header > .ob-ad-wrap,
    body.anbita-app .onairbase-surface .ob-site-shell-header > .ob-ad-wrap,
    body.anbita-app .radio-entry-page .ob-site-shell-header > .ob-ad-wrap {
        margin-top: 22px !important;
    }
}

/* App unabhängig von der Breite ebenfalls einzeilig und kompakt halten */
body.anbita-app .onairbase-surface .ob-main-nav,
body.anbita-app .radio-entry-page .ob-main-nav,
body.anbita-app .onairbase-surface .ob-hero-stack .ob-main-nav,
body.anbita-app .radio-entry-page .ob-hero-stack .ob-main-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* v212: native ANBITA Radio App – Abstand oben, kompakte Symbolnavigation ohne Text */
body.anbita-app.onairbase-native-app .onairbase-surface .ob-site-shell-header,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-site-shell-header{
    padding-top:14px!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav{
    width:calc(100% - 20px)!important;
    max-width:420px!important;
    margin:0 auto 14px!important;
    gap:8px!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile{
    min-height:58px!important;
    height:58px!important;
    padding:6px!important;
    border-radius:14px!important;
    gap:0!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile .ob-nav-label,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile .ob-nav-label{
    display:none!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile .ob-nav-icon,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile .ob-nav-icon{
    display:block!important;
    font-size:1.55rem!important;
    line-height:1!important;
}

/* v213: Native ANBITA Radio Portal App – klare Kachelbeschriftung und sauberer Oberabstand */
body.anbita-app.onairbase-native-app .onairbase-surface .ob-site-shell-header,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-site-shell-header{
    padding-top:20px!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav{
    margin-top:0!important;
    margin-bottom:16px!important;
}

/* Startseite und Eintragen: nur Symbol. */
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(1) .ob-nav-label,
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(4) .ob-nav-label,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(1) .ob-nav-label,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(4) .ob-nav-label{
    display:none!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(1) .ob-nav-icon,
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(4) .ob-nav-icon,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(1) .ob-nav-icon,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(4) .ob-nav-icon{
    display:block!important;
    font-size:1.55rem!important;
}

/* Radio und TV: nur eindeutiger Text, keine abstrakten Symbole. */
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(2) .ob-nav-icon,
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-icon,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(2) .ob-nav-icon,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-icon{
    display:none!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(2) .ob-nav-label,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(2) .ob-nav-label{
    display:block!important;
    font-size:.92rem!important;
    line-height:1!important;
    font-weight:800!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-label,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-label{
    display:block!important;
    font-size:0!important;
    line-height:1!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-label::after,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-label::after{
    content:'TV';
    font-size:.92rem!important;
    line-height:1!important;
    font-weight:800!important;
    color:inherit!important;
    -webkit-text-fill-color:inherit!important;
}

/* v214: Native App – Radio und TV gleich groß und sicher einzeilig */
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(2) .ob-nav-label,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(2) .ob-nav-label{
    display:block!important;
    font-size:.82rem!important;
    line-height:1!important;
    font-weight:800!important;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    letter-spacing:0!important;
}
body.anbita-app.onairbase-native-app .onairbase-surface .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-label::after,
body.anbita-app.onairbase-native-app .radio-entry-page .ob-main-nav > .ob-nav-tile:nth-child(3) .ob-nav-label::after{
    font-size:.82rem!important;
    line-height:1!important;
    font-weight:800!important;
    white-space:nowrap!important;
    letter-spacing:0!important;
}