/* ============================================================================
   Schwebende Bottom-Bar der Leistungsseiten — nur Handy (Stand 11.08.2026)

   Herkunft: Die Bar gibt es seit jeher auf der mobilen Startseite. Dort haengt
   sie an Tailwind-Klassen, die es auf den Leistungsseiten nicht gibt. Deshalb
   sind die Werte hier nicht nachgebaut, sondern aus dem laufenden Browser
   GEERNTET (getComputedStyle auf lx-lx.de) und in eigenstaendiges CSS
   uebersetzt. Wer etwas aendert, aendert es nur hier — die Startseite bleibt
   unberuehrt und umgekehrt.

   🔴 Diese Datei wird ausschliesslich von den 25 Leistungsseiten geladen.
      Sie darf nichts enthalten, was ausserhalb von #lx-dock wirkt — sonst veraendert sie Seiten, die sie gar nicht bestellt haben.

   Stand 11.08.2026: Die vier Symbole tragen ihre Beschriftung jetzt dauerhaft
   unter sich (`.lxd-txt`); das gleitende Schild unter der Leiste ist entfallen.
   Jan am 11.08.: „die bottom bar soll bitte verlinkt werden, also die 4 icons.
   und benannt werden ... ueberall das passende icon rein fuer den jeweiligen
   bereich."

   Ein Unterschied zur Startseite ist bewusst: Der Ring um den Kontaktknopf
   traegt dort #F7F7F7, hier #FFFFFF. Der Ring soll mit dem Seitengrund
   verschmelzen, und der ist auf den Leistungsseiten weiss (gemessen an
   #lx-sg). Derselbe Farbwert waere hier ein sichtbarer grauer Kranz.
   ========================================================================== */

/* Unterhalb von 641px — dieselbe Grenze, die auch /_lx/mobil.css benutzt. */
@media (min-width: 641px) {
  #lx-dock { display: none !important; }
}

@media (max-width: 640px) {

  #lx-dock {
    position: fixed;
    /* 40px wie auf der Startseite — plus den sicheren Bereich, den iPhones mit
       Home-Indikator freihalten. Ohne Indikator ist env() gleich 0, dort bleibt
       es exakt bei 40px. Ohne die Zugabe liegt die Leiste auf dem Indikator. */
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 360px;
    z-index: 100;
    /* Der Kasten selbst faengt keine Klicks — nur seine Kinder. Sonst laege
       ein unsichtbares Rechteck ueber dem Text neben der Bar. */
    pointer-events: none;
  }

  #lx-dock .lxd-glas {
    position: relative;
    display: block;
    border-radius: 40px;
    background: rgba(255, 255, 255, .45);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    pointer-events: auto;
  }

  /* --- gleitende Pille hinter dem aktiven Symbol --- */
  #lx-dock .lxd-pille {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 0;
    border-radius: 9999px;
    background: rgba(51, 49, 50, .07);
    opacity: 0;
    z-index: 0;
    /* Die Pille ist Schmuck. Ohne diese Zeile faengt sie Antipper ab, die dem
       Symbol darueber gelten. */
    pointer-events: none;
    transition: transform .55s cubic-bezier(.32, .72, 0, 1),
                width     .55s cubic-bezier(.32, .72, 0, 1),
                opacity   .3s;
  }
  #lx-dock .lxd-pille.ist-bereit { opacity: 1; }

  /* --- Symbolreihe --- */
  #lx-dock .lxd-reihe {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
  }

  #lx-dock .lxd-ziel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
    height: 56px;
    color: rgba(51, 49, 50, .55);
    text-decoration: none;
    transition: color .4s cubic-bezier(.32, .72, 0, 1);
  }
  #lx-dock .lxd-ziel.ist-aktiv { color: #0F2542; }
  #lx-dock .lxd-ziel svg {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #lx-dock .lxd-ziel.ist-aktiv svg { stroke-width: 2.5; }

  /* --- Beschriftung unter dem Symbol -------------------------------------
     Sie steht dauerhaft da, nicht nur am aktiven Eintrag: Wer die Bar sieht,
     soll ohne Antippen wissen, wohin die vier Symbole fuehren. Deshalb ist
     das frueher gleitende Schild unter der Leiste entfallen — es zeigte immer
     nur einen der vier Namen und blieb genau dort leer, wo die Seite noch im
     Hero steht.
     Die Schrift ist eine Spur dunkler als das Symbol: Text braucht mehr
     Kontrast als eine Glyphe, und unter der Glyphenmaske gemessen liegen
     beide Zustaende ueber 4,5:1. */
  #lx-dock .lxd-txt {
    display: block;
    max-width: 64px;
    font-family: "Google Sans", system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.005em;
    text-align: center;
    white-space: nowrap;
    color: rgba(51, 49, 50, .72);
    transition: color .4s cubic-bezier(.32, .72, 0, 1);
  }
  #lx-dock .lxd-ziel.ist-aktiv .lxd-txt {
    color: #0F2542;
    font-weight: 700;
  }

  /* --- Dunkle Fassung ueber dem Fuss --------------------------------------
     Der Handy-Fuss ist eine geschlossene Navy-Flaeche (#0F2542, gemessen).
     Das helle Glas laesst sie durch, und dunkle Schrift auf dunklem Grund
     kommt dort nur auf 2,54:1 — nachgemessen ueber 25 Seiten, unter der
     Glyphenmaske. Statt die Leiste ueberall undurchsichtig zu machen (und
     damit die geerntete Optik der Startseite aufzugeben), dreht sie sich
     genau dort um, wo der Fuss hinter ihr steht. /_lx/lx-dock.js setzt dafuer
     `auf-dunkel`. Faellt das Skript aus, bleibt die helle Fassung — auf den
     ersten 85 % der Seite ist sie die richtige, ueber dem Fuss waeren es dann
     wieder 2,54:1. Diese Abhaengigkeit ist bewusst in Kauf genommen: Ohne
     Kenntnis der Scrollposition kann CSS den Wechsel nicht treffen, und die
     Datei ist 3 KB gross und laedt mit `defer` von derselben Domain wie die
     Seite (Codex-Hinweis 11.08., gepruefte Abwaegung). */
  #lx-dock .lxd-glas,
  #lx-dock .lxd-kontakt { transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }

  #lx-dock.auf-dunkel .lxd-glas {
    /* .82 statt eines duenneren Schleiers: Umgeschaltet wird schon, sobald der
       Fuss die Unterkante beruehrt — in diesem kurzen Streifen steht die
       Leiste noch groesstenteils vor hellem Grund. Bei .55 kaeme die weisse
       Schrift dort auf 2,85:1; mit .82 sind es 5,35:1, gemessen an drei Seiten
       ueber sechs Scrollstellen rund um die Kante. */
    background: rgba(15, 37, 66, .82);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .45);
  }
  #lx-dock.auf-dunkel .lxd-pille { background: rgba(255, 255, 255, .16); }
  #lx-dock.auf-dunkel .lxd-ziel { color: rgba(255, 255, 255, .7); }
  #lx-dock.auf-dunkel .lxd-txt  { color: rgba(255, 255, 255, .88); }
  #lx-dock.auf-dunkel .lxd-ziel.ist-aktiv,
  #lx-dock.auf-dunkel .lxd-ziel.ist-aktiv .lxd-txt { color: #FFFFFF; }
  /* Der Ring traegt den Grund, auf dem der Knopf sitzt — hier den Fuss. */
  #lx-dock.auf-dunkel .lxd-kontakt {
    /* Derselbe Wert wie das Glas — im Uebergangsstreifen sieht der Ring damit
       aus wie ein Stueck der Leiste. Deckendes Navy wuerde dort als harter
       dunkler Kranz auf hellem Grund stehen. */
    box-shadow: 0 0 0 6px rgba(15, 37, 66, .82),
                0 25px 50px -12px rgba(0, 0, 0, .5);
  }

  /* --- Kontaktknopf in der Mitte --- */
  #lx-dock .lxd-kontakt {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: #167BFC;
    color: #fff;
    /* Der 6px-Ring traegt den Seitengrund und schneidet die Bar frei. */
    box-shadow: 0 0 0 6px #FFFFFF,
                0 25px 50px -12px rgba(15, 37, 66, .4);
    cursor: pointer;
  }
  #lx-dock .lxd-kontakt svg {
    width: 28px;
    height: 28px;
    display: block;
    margin-bottom: 6px;
    fill: #fff;
    stroke: none;
  }
  #lx-dock .lxd-punkte {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(51, 49, 50, .1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    z-index: 30;
    transition: transform .15s cubic-bezier(.4, 0, .2, 1);
  }
  #lx-dock .lxd-punkte i {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: #1C3190;
    opacity: .3;
    animation: lxdTippen 1.4s infinite;
  }
  #lx-dock .lxd-punkte i:nth-child(2) { animation-delay: .2s; }
  #lx-dock .lxd-punkte i:nth-child(3) { animation-delay: .4s; }

  @keyframes lxdTippen {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-3px); }
  }

  /* Antippen: dieselbe Rueckmeldung wie .btn-ios auf der Startseite. */
  #lx-dock .lxd-ziel:active,
  #lx-dock .lxd-kontakt:active {
    transform: scale(.96);
    opacity: .8;
    transition: all .1s ease;
  }
  #lx-dock .lxd-kontakt:active { transform: scale(.96); }

  @media (prefers-reduced-motion: reduce) {
    #lx-dock .lxd-pille,
    #lx-dock .lxd-txt,
    #lx-dock .lxd-ziel { transition: none; }
    #lx-dock .lxd-punkte i { animation: none; }
  }

  /* --- Platz am Seitenende ------------------------------------------------
     Hier stand eine Zugabe `#lexup-ftr-mob{padding-bottom:154px}`, damit die
     schwebende Leiste nicht auf der Rechtszeile des Fusses sitzt.
     🔴 Seit dem Handy-Fuss vom 10.08. abends gibt es `#lexup-ftr-mob` auf
     diesen Seiten nicht mehr — die Regel lief seitdem ins Leere (gemessen:
     das Element existiert auf keiner der 25 Seiten). Ersatzlos raus, denn der
     neue Fuss bringt sein Polster selbst mit (`pb-48` = 192px); nachgemessen
     bleiben unter der Leiste 78px freie Flaeche. Wer den Fuss aendert, misst
     das bitte nach.
     ⚠️ Ohne Fuss haette die Seite nur ihr eigenes Endpolster (mobil 64px) und
     die Leiste ueberdeckte die letzten rund 48px — auf allen 25 Seiten ist der
     Fuss vorhanden (25/25 gemessen), fuer eine kuenftige Seite ohne Fuss muss
     die Zugabe wieder her (Codex-Hinweis 11.08.). */

  /* Beim Sprung auf einen Abschnitt darf die klebende Kopfleiste (66px) die
     Ueberschrift nicht verdecken. */
  #lx-sg #sec-positionen,
  #lx-sg #sec-steps,
  #lx-sg #sec-vergleich,
  #lx-sg #sec-kosten { scroll-margin-top: 78px; }
}