/* wasserstand.fun -- App-Banner #wsAppBanner (Phase D; mobil Bottom-Bar, Desktop oben im Fluss). Ausgelagert aus app_buehne.py (_APP_BANNER_TEMPLATE, #64). */
.ws-appbanner { display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 8px 8px 14px;
    background:var(--accent-200, #e7e5fe); color:var(--accent-900, #2b2741); font-size:14px; line-height:1.35;
    font-family:inherit; }
.ws-appbanner[hidden] { display:none; }
.ws-appbanner-icon { flex:none; width:28px; height:28px; border-radius:7px; }
.ws-appbanner-text { min-width:0; font-weight:500; }
.ws-appbanner-btn { flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:36px;
    padding:0 16px; border-radius:999px; background:var(--accent-fill, #5d5294); color:#fff !important;
    font-weight:700; font-size:14px; text-decoration:none !important; white-space:nowrap; }
.ws-appbanner-btn[hidden] { display:none; }
.ws-appbanner-x { flex:none; width:44px; height:44px; margin:-4px 0; border:0; background:transparent;
    color:inherit; font-size:24px; line-height:1; cursor:pointer; border-radius:8px; }
.ws-appbanner-x:hover { background:rgba(0,0,0,.06); }
@media screen and (max-width:700px) {
    .ws-appbanner { position:fixed; left:0; right:0; bottom:0; z-index:250; justify-content:flex-start;
        padding:8px 4px 8px 12px; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
        border-top:1px solid var(--accent-300, #d2cefd); box-shadow:0 -4px 16px rgba(41,43,49,.12); }
    .ws-appbanner-text { flex:1; }
    html.ws-hat-appbanner body { padding-bottom:80px; }
    html.ws-hat-appbanner #pwaInstallHinweis { bottom:84px !important; }
}
@media print { .ws-appbanner { display:none !important; } }