/*
 * ANBITA Ansichts-System
 * =====================
 * Die Klassen werden zentral in inc/header.php gesetzt.
 *
 * Anzeigeart:
 *   .anbita-app             installierte PWA/App
 *   .anbita-mobile-browser  normaler Browser auf Smartphone
 *   .anbita-web-browser     normaler Browser auf Tablet/PC/Laptop
 *
 * Gerät:
 *   .anbita-device-smartphone  bis 620 px
 *   .anbita-device-tablet      621 bis 1024 px
 *   .anbita-device-desktop     ab 1025 px
 *
 * Kombinationen für neue Bereiche:
 *   .anbita-app-smartphone
 *   .anbita-app-tablet
 *   .anbita-app-desktop
 *
 * Zurück-Schaltflächen werden über anbita_view_back_row() ausgegeben.
 * Dadurch stehen sie in App-Ansichten immer unten links am Seitenende.
 */

.anbita-view-only-app{
    display:none!important;
}
body.anbita-app .anbita-view-only-app{
    display:flex!important;
}
body.anbita-app .anbita-view-only-browser{
    display:none!important;
}

.anbita-view-back-row{
    display:flex;
    clear:both;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    margin:28px 0 22px;
    padding:0 2px;
    box-sizing:border-box;
    text-align:left;
}

.anbita-view-back-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    max-width:max-content!important;
    min-height:42px!important;
    padding:9px 17px!important;
    border:1px solid #111!important;
    border-radius:12px!important;
    background:#ffc400!important;
    color:#111!important;
    -webkit-text-fill-color:#111!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    font-weight:900!important;
    line-height:1.2!important;
    text-align:center!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    box-shadow:none!important;
}
.anbita-view-back-button:hover,
.anbita-view-back-button:focus-visible{
    background:#ffd43b!important;
    color:#111!important;
    -webkit-text-fill-color:#111!important;
}
.anbita-view-back-button:focus-visible{
    outline:3px solid #0f4fd8!important;
    outline-offset:3px!important;
}

/* In der App bleibt ausreichend Abstand zur unteren Systemnavigation. */
body.anbita-app .anbita-view-back-row{
    margin-top:28px!important;
    margin-bottom:calc(20px + env(safe-area-inset-bottom))!important;
}


/* Mobiler Browser: ebenfalls links unten, mit Abstand zur Browsernavigation. */
body.anbita-mobile-browser .anbita-view-back-row{
    margin-top:24px!important;
    margin-bottom:calc(18px + env(safe-area-inset-bottom))!important;
}
body.anbita-mobile-browser .anbita-view-back-button{
    min-height:40px!important;
    padding:8px 15px!important;
    border-radius:11px!important;
    font-size:14px!important;
}

/* Smartphone-App: etwas kompakter, weiterhin klar links unten. */
body.anbita-app-smartphone .anbita-view-back-row{
    margin-top:24px!important;
    margin-bottom:calc(18px + env(safe-area-inset-bottom))!important;
    padding-left:2px!important;
}
body.anbita-app-smartphone .anbita-view-back-button{
    min-height:40px!important;
    padding:8px 15px!important;
    border-radius:11px!important;
    font-size:14px!important;
}

/* Tablet- und Desktop-App: gleicher Aufbau, etwas mehr Abschlussabstand. */
body.anbita-app-tablet .anbita-view-back-row,
body.anbita-app-desktop .anbita-view-back-row{
    margin-top:30px!important;
    margin-bottom:calc(24px + env(safe-area-inset-bottom))!important;
}