/* assets/css/mobil-cta.css — fester Kaufbalken am unteren Rand, nur am
   Telefon. Markup: _includes/mobil_cta.php, Sichtbarkeit: assets/js/
   mobil-cta.js (Klasse .is-sichtbar).

   >>> ER EXISTIERT NUR UNTER 700px <<<
   Genau dort verschwindet der Kopfzeilen-Knopf ins Hamburger-Menue
   (base.css, @media max-width:700px). Oberhalb waere der Balken eine
   zweite Flaeche fuer denselben Zweck - also display:none, nicht nur
   versteckt: er soll am Schreibtisch gar nicht erst im Layout stehen.

   >>> Z-INDEX-ORDNUNG <<<
   Kopfzeile 40, Sprach-/Hamburger-Menue 45, Cookie-Banner 60. Der
   Balken liegt mit 50 darueber, aber unter dem Banner - und wird
   ohnehin ausgeblendet, solange das Banner steht (Regel ganz unten). */

.mobil-cta { display: none; }

/* Ohne JavaScript bleibt das `hidden` aus dem Markup stehen und der
   Balken entsteht gar nicht erst - der Knopf im Hamburger-Menue bleibt
   ja erreichbar. Die Regel braucht die hoehere Spezifitaet, weil die
   Klassenregel weiter unten sonst das UA-eigene `[hidden]` ueberstimmt. */
.mobil-cta[hidden] { display: none; }

@media (max-width: 700px) {
  .mobil-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 17, 20, .94);
    border-top: 1px solid rgba(245, 165, 36, .30);
    /* Der Balken liegt ueber dem Seiteninhalt; ohne Unschaerfe blitzen
       helle Sektionen durch die 94 % Deckung hindurch. */
    backdrop-filter: blur(10px);
    /* Erst per JS eingeblendet. translateY statt display, damit das
       Auftauchen nicht springt.
       visibility MUSS mit: ein nur verschobener Balken bleibt sonst im
       Tab-Lauf und wird vom Screenreader vorgelesen, obwohl niemand ihn
       sieht. Die Verzoegerung 0s/.22s schaltet ihn erst NACH dem
       Hinausfahren unsichtbar, sonst verschwindet er ruckartig. */
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }

  .mobil-cta.is-sichtbar {
    transform: translateY(0);
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
  }

  .mobil-cta-preis {
    margin: 0;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1;
    color: #a8a49b;
    white-space: nowrap;
  }

  /* >>> INLINE, NICHT block (26.09.2026) <<<
     Die erste Fassung stellte die Zahl als eigene Zeile darueber. In
     den Sprachen mit NACHgestelltem Euro sah das gut aus ("14" ueber
     "EUR/Monat"), in denen mit VORangestelltem Euro zerfiel es in drei
     Zeilen: "EUR", "14", "/mi" (gemessen an ga bei 360px). Inline
     traegt beide Stellungen, und die Zeile ist ohnehin kurz genug -
     "EUR14/mi" bleibt auch auf dem schmalsten Geraet einzeilig. */
  .mobil-cta-preis b {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
  }

  /* Der Knopf traegt die Last - er bekommt den Platz, der uebrig ist,
     und bleibt ueber der 48px-Tippgrenze. Die Beschriftung ist in
     fr/pt/ga rund 21 Zeichen lang; deshalb darf sie hier umbrechen
     statt den Balken zu sprengen. */
  .mobil-cta-knopf {
    flex: 1 1 auto;
    max-width: 62%;
    min-height: 48px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  /* Solange das Cookie-Banner steht, kein zweiter Balken darunter. */
  #bd-consent:not([hidden]) ~ .mobil-cta {
    transform: translateY(110%);
    visibility: hidden;
  }
}

/* Kein Auf- und Zufahren fuer alle, die Bewegung abbestellt haben -
   der Balken ist dann einfach da oder nicht. */
@media (prefers-reduced-motion: reduce) {
  .mobil-cta { transition: none; }
}