/* ============================================================================
   HOMES & FLOORS — TAB-LEISTE UND TRUST-LEISTE AUF DEM TELEFON
   Entwuerfe "Mobile Tab Bar.dc.html" und "Hero Carousel.html" (Trust Strip),
   beide aus der Quelle des Buendels gelesen. 2026-08-31, v1.11.64
   ----------------------------------------------------------------------------
   EINE KORREKTUR AN MIR SELBST, die hier stehen bleibt, weil sie erklaert,
   warum diese Datei aussieht, wie sie aussieht.

   In 1.11.61 habe ich eine NEUE Bodenleiste gebaut (.hf-tabbar, mit eigenem
   Renderer). Das war falsch: es gibt bereits eine, .hfbn, ausgegeben in
   engine/src/Header.php mit eigenem <style id="hfbn-css">. Meine Suche hatte
   nach "tabbar", "tab-bar" und "bottom-nav" gegriffen -- auf "hfbn" passt
   keines davon. Zwei Bodenleisten uebereinander waeren doppelte Navigation,
   doppeltes Markup und ein zweiter Warenkorbzaehler gewesen.

   Der Renderer ist zurueckgenommen (liegt unter dist/_to_delete/). Diese
   Datei STYLT jetzt die vorhandene Leiste, statt eine zweite danebenzusetzen.
   Das ist auch die billigere Loesung: .hfbn traegt bereits Zaehler, Punkt und
   den aktiven Zustand.

   Beide Bloecke gelten AUSSCHLIESSLICH unter 768px.
   ========================================================================== */

@media (max-width:767px){
  /* KEIN body-Polster mehr (31.08.2026, zweiter Wurf): auf hellem
     body-Grund erschien es als weisser Streifen NACH dem navy Footer
     ("die Seite soll mit dem Footer enden"), und auf dem Warenkorb
     neutralisierte es ein fremder !important-Nuller ohnehin. Das Polster
     sitzt jetzt an der Quelle des Footers selbst (Footer.php, navy). */


/* ==========================================================================
   1) DIE TAB-LEISTE — .hfbn auf die dunkle Fassung des Entwurfs
   --------------------------------------------------------------------------
   Der Bestand ist die HELLE Fassung: Deck rgba(255,255,255,.78), Symbole
   #A7ADAB, aktiver Napf #E4F5E7 auf #0F1A16. Der Entwurf hat zwei Varianten
   und steht auf "dark" als Vorgabe.

   Aus der Quelle gelesen (renderVals, variant "dark"):

       Leiste     max 420, Radius 20, Innenabstand 6,
                  Grund rgba(12,24,41,.88), Rand rgba(255,255,255,.1),
                  blur(18px), Schatten 0 18px 45px rgba(15,30,51,.35)
       Knopf      Spalte, Abstand 3, Mindesthoehe 52, Radius 15
       aktiv      Flaeche rgba(22,163,74,.16), Farbe #4ade80, Staerke 600
       ruhend     rgba(255,255,255,.55), Staerke 500
       Schrift    10px, Sperrung .6px, Grossbuchstaben
       Symbol     21x21, Strichstaerke 1.8

   ZWEI ABWEICHUNGEN, beide begruendet:

   a) FARBE. #0c1829 und #16a34a/#4ade80 kommen im Haus nirgends vor.
      Benutzt werden die Token aus hf-global.css: --hfh-accent #122B4C,
      --hfh-champagne-deep #37c84b, --hfh-champagne-soft, --hfh-success.
      Am Bildschirm nachgesehen liest --hfh-accent-dark (11,29,53) bei hoher
      Deckung als Schwarz; --hfh-accent (18,43,76) ist dunkel genug fuer
      weisse Schrift (rund 15:1) und als BLAU erkennbar.

   b) KONTRAST. Der Entwurf setzt die ruhende Beschriftung auf
      rgba(255,255,255,.55) bei 10px Grossbuchstaben -- gegen den
      Leistengrund rund 4,4:1 und damit unter den 4,5:1 aus WCAG 1.4.3.
      Hier steht .74, rund 7,4:1.

   Die Bestandsregeln stehen in einem INLINE-Block (<style id="hfbn-css">),
   der spaeter im Dokument steht als jede Datei. Gegen ihn hilft keine
   Ladereihenfolge, nur Spezifitaet: der Bestand schreibt .hfbn__deck (0-1-0),
   hier steht durchgehend html .hfbn__deck (0-1-1) und mehr. Kein !important
   noetig -- und genau deshalb bleibt die Datei rueckbaubar: loeschen, und
   die helle Fassung ist zurueck.
   ========================================================================== */

  html .hfbn{
    padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));
  }

  html .hfbn__deck{
    max-width:420px;
    margin:0 auto;
    grid-template-columns:repeat(4,1fr);
    padding:6px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    background:rgba(18,43,76,.90);            /* --hfh-accent */
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 18px 45px rgba(11,29,53,.38),inset 0 1px 0 rgba(255,255,255,.08);
  }
  /* Ohne backdrop-filter laege die Leiste durchsichtig ueber dem Inhalt. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    html .hfbn__deck{background:rgba(18,43,76,.98)}
  }

  html .hfbn__tab{
    gap:3px;
    min-height:52px;
    padding:6px 4px;
    border-radius:15px;
    background:transparent;
    transition:background .25s ease,color .25s ease;
  }
  /* Der Napf des Bestandes traegt im Entwurf keine eigene Flaeche mehr --
     die Flaeche wandert auf den ganzen Knopf. */
  html .hfbn__slot{
    width:auto;height:auto;
    background:transparent;
    color:rgba(255,255,255,.74);              /* s. Kopf: Kontrast, nicht .55 */
  }
  html .hfbn__tab svg{
    width:21px;height:21px;
    stroke-width:1.8;
  }
  html .hfbn__tab small{
    font-size:10px;font-weight:500;
    letter-spacing:.6px;text-transform:uppercase;
    line-height:1;
    color:rgba(255,255,255,.74);
  }

  /* Der stehende Reiter. */
  html .hfbn__tab.on{
    background:rgba(121,183,129,.16);         /* --hfh-champagne-soft */
  }
  html .hfbn__tab.on .hfbn__slot{
    background:transparent;
    color:#37c84b;                            /* --hfh-champagne-deep */
  }
  html .hfbn__tab.on svg{stroke-width:1.9}
  html .hfbn__tab.on small{color:#37c84b;font-weight:600}

  html .hfbn__tab:focus-visible{outline:2px solid #37c84b;outline-offset:3px}

  /* Punkt und Abzeichen in die Leistenfarbe, sonst steht ein weisser Ring
     auf dunklem Grund. */
  html .hfbn__dot{
    background:#37c84b;
    border-color:#122B4C;
  }
  html .hfbn__bdg{
    background:#15803D;                       /* --hfh-success, Weiss ~5,9:1 */
    color:#fff;
    border-color:#122B4C;
  }

/* ==========================================================================
   2) DIE TRUST-LEISTE — HIER ENTFERNT (31.08.2026, v1.11.66)
   --------------------------------------------------------------------------
   An dieser Stelle stand meine erste Fassung: navy Grund, Untertitel ganz
   aus, Sterne UEBER dem Titel. Sie ist zurueckgenommen.

   Der Entwurf "Trust Strip Mobile.dc.html" lag danach vor und sagt etwas
   anderes: heller Grund (Verlauf weiss nach #fafbfc), Symbol in einem
   26px-Kreis mit Ring und Schatten, darunter Titel mit Wert, DARUNTER die
   Sterne, und beim dritten Feld statt Sternen eine Unterzeile in
   Grossbuchstaben. Das ist keine Abwandlung meiner Fassung, sondern eine
   andere Anordnung.

   Sie steht jetzt in einer eigenen Datei: hf-mobile-truststrip.css.
   ========================================================================== */

}

@media (max-width:767px) and (prefers-reduced-motion:reduce){
  html .hfbn__tab{transition:none}
}