/* ============================================================================================================
   Terminleiste unten (bis 1023px) statt Seitenreiter -- Paket B, 2026-10-28, nach Weddinghouse 1.54.5.

   WARUM: Der Seitenreiter .stickyBtn (header.css) steht fest am RECHTEN Rand, senkrecht. Bis 1023px lag er ueber
   dem Seiteninhalt (Formularfelder, Texte am rechten Rand). Ab 1024px streift er weder Inhalt noch Fusszeile
   (gemessen 1024/1280/1440 an Start, Store-Seite, Terminseite) -- dort bleibt er unveraendert.

   AUFBAU: .terminleiste und .stickyBtn sind direkte Geschwister von .header und von .progress-wrap/#cc-main
   (alle Kinder von <body>). Deshalb wirkt alles hier ueber `~` NUR, wenn die Leiste ausgegeben wird -- auf der
   Terminseite (ohneTerminreiter) gibt es sie nicht, und dort bleibt auch "Nach oben" und der Banner, wo er war.

   iPhone: env(safe-area-inset-bottom) ist ohne `viewport-fit=cover` im viewport-Meta 0 -- Safari haelt die Leiste
   dann selbst ueber seinem Rand. Steht eines Tages `viewport-fit=cover` da, greift der Abstand von allein.

   Keine scss-Quelle: die Datei wird von Hand gepflegt (auf dem Server laeuft kein Sass). ?v= in layouts/app.blade.php.
   ============================================================================================================ */

.terminleiste,
.terminleiste-platz {
    display: none;
}

@media only screen and (max-width: 1023px) {
    .stickyBtn {
        display: none;
    }

    .terminleiste {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        box-sizing: border-box;
        height: calc(52px + env(safe-area-inset-bottom, 0px));
        padding: 0 16px env(safe-area-inset-bottom, 0px);
        background-color: #363636;
        color: #fff;
        font-size: 15px;
        letter-spacing: .06em;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
    }
    .terminleiste:hover,
    .terminleiste:focus-visible {
        background-color: #000;
        color: #fff;
    }
    .terminleiste:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -5px;
    }
    .terminleiste i {
        font-size: 18px;
    }

    /* Wie der Reiter (header.css): bei offenem Mobilmenue und offener Suche weg -- "Beratungstermin" steht im Menue. */
    .header.menu-open ~ .terminleiste,
    .header.opened ~ .terminleiste {
        display: none;
    }

    /* Seitenende frei: der Platzhalter steht hinter der Fusszeile (footer.blade.php). */
    .terminleiste-platz {
        display: block;
        height: calc(52px + env(safe-area-inset-bottom, 0px));
    }

    /* "Nach oben" (footer.css: bottom 25px) und Cookie-Banner (cookieconsent.css: bottom var(--cc-modal-margin))
       ueber die Leiste stapeln. */
    .terminleiste ~ .progress-wrap {
        bottom: calc(52px + 16px + env(safe-area-inset-bottom, 0px));
    }
    /* Hoehe auf den Platz ueber der Leiste begrenzen: bei 320x568 ragte der deutsche Banner (514 px) nach dem
       Anheben sonst 6 px oben aus dem Bild (Probe 28.10.). Reicht der Platz nicht, scrollt der Banner in sich. */
    .terminleiste ~ #cc-main .cm.cm--bottom {
        bottom: calc(var(--cc-modal-margin, 1rem) + 52px + env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - 2 * var(--cc-modal-margin, 1rem) - 52px - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 2 * var(--cc-modal-margin, 1rem) - 52px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }
}