/*
 * hm-nav - Kontextzeile und Leiste am Telefon.
 *
 * ⚠⚠ WARUM DAS HIER EINE DATEI IST UND KEIN INLINE-<style> (seit 1.1.0)
 * Bis 1.0.3 standen Stylesheet und Skript inline in der Seite. Am 10.09.2026
 * am lebenden Objekt gemessen: LiteSpeeds Optimierung merkt sich die fertige
 * Fassung JE SEITENADRESSE. Inline ausgelieferte Stile haben keine eigene
 * Adresse - es gibt also nichts, woran eine Aenderung erkennbar waere. Nach
 * dem Einspielen von 1.0.3 trug /introducing-bayrak/ beides neu, /scenes/
 * beides alt und /cum-contest-extreme/ das Skript neu und das Stylesheet alt.
 * Weder "Purge All" noch "Empty Entire Cache" haben das zuverlaessig
 * aufgeloest, und die Purge-Knoepfe melden ohnehin an einen LiteSpeed-Server,
 * den dieser Apache-VPS gar nicht hat.
 *
 * Eine echte Datei mit filemtime() als Version loest es: aendert sich die
 * Datei, aendert sich ihre Adresse, und damit auch der Schluessel jedes
 * Buendels, in das sie hineinoptimiert wird. Genau das haelt Punkt 3147 des
 * Projektwissens schon fest - dort fuer die Schriftdefinition, und der Satz
 * dort lautet ausdruecklich: "Das gilt fuer jede kuenftige CSS-Aenderung an
 * diesem Theme."
 */

/* Die Kontextzeile.
   Hausschrift, Hausrot, beim Ueberfahren das Hausgelb - beides nicht
   geraten, sondern am 10.09.2026 auf der lebenden Seite gemessen: #ea2e1b
   ist das Rot der Ueberschriften, #eeee22 der einzige nennenswerte Gelbton
   der Seite (achtmal verwendet; das eine reine #ffff00 ist ein Ausreisser).
   ⚠ Die Familie heisst auf dieser Installation `futura-extra-black` - genau
   so, mit Bindestrichen und ohne Anfuehrungszeichen. Unter einem anderen
   Namen (etwa "Futura Extra Bold") wird sie NICHT gefunden, und der Browser
   faellt still auf die Ersatzschrift zurueck. */
.hm-nav{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 6px;padding:14px 15px 0;box-sizing:border-box;font-family:futura-extra-black,sans-serif;font-size:15px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;line-height:1.4}
.hm-nav a{color:#ea2e1b;text-decoration:none;transition:color .2s ease}
.hm-nav a:hover,.hm-nav a:focus{color:#eeee22}
/* ⚠ Der Pfeil bleibt in einer Systemschrift. futura-extra-black ist eine
   Auszeichnungsschrift; ob sie das Zeichen ← ueberhaupt enthaelt, ist nicht
   verlaesslich. Fehlt es, zeigt der Browser ein leeres Rechteck - und zwar
   ausgerechnet an dem Zeichen, das den Rueckweg ankuendigt. */
.hm-nav-pfeil{display:inline-block;margin-right:3px;font-family:Helvetica,Arial,sans-serif}
.hm-nav-teiler{color:rgba(234,46,27,.45)}
@media (max-width:600px){.hm-nav{font-size:13px;gap:7px;padding-top:10px}}

/* Die Leiste am Telefon. Sie wird erst per Klasse sichtbar - ohne JavaScript
   ist sie nicht da, und das ist richtig so: ohne JavaScript weiss niemand,
   ob der Player schon aus dem Bild ist. */
.hm-nav-leiste{position:fixed;left:0;right:0;bottom:0;z-index:9990;display:none;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:rgba(10,10,10,.96);border-top:1px solid #262626;box-sizing:border-box;transform:translateY(100%);transition:transform .22s ease}
.hm-nav-leiste.an{transform:translateY(0)}
.hm-nav-leiste .hm-nav-l-zurueck{font-family:"Nunito Sans",sans-serif;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:#fff;text-decoration:none;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm-nav-leiste .hm-nav-l-zurueck:hover,.hm-nav-leiste .hm-nav-l-zurueck:focus{color:#ea2e1b}
/* ⚠⚠ DAS THEME STYLT JEDEN NACKTEN <button> UND JEDES a.button.
   Phlox' Regel `a.button, button, input[type="button"], .aux-button` setzt
   20px/35px Padding und ist spezifischer als eine einzelne eigene Klasse -
   aus einem Knopf wird sonst ein Kasten, der die halbe Leiste fuellt
   (Projektwissen 673). Element plus zwei Klassen schlagen die Themeregel,
   ohne ein einziges !important. */
.hm-nav-leiste a.hm-nav-l-knopf,.hm-nav-leiste button.hm-nav-l-knopf{flex:0 0 auto;display:inline-block;padding:10px 18px;margin:0;border:0;box-shadow:none;min-width:0;min-height:0;width:auto;height:auto;line-height:1;font-family:"Nunito Sans",sans-serif;font-size:12px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#fff;background:#ea2e1b;border-radius:3px;text-decoration:none;cursor:pointer;box-sizing:border-box}
.hm-nav-leiste a.hm-nav-l-knopf:hover,.hm-nav-leiste a.hm-nav-l-knopf:focus,.hm-nav-leiste button.hm-nav-l-knopf:hover,.hm-nav-leiste button.hm-nav-l-knopf:focus{background:#fff;color:#ea2e1b}
@media (max-width:768px){.hm-nav-leiste{display:flex}}
@media (prefers-reduced-motion:reduce){.hm-nav-leiste{transition:none}}
/* ⚠ Der "nach oben"-Pfeil des Themes sitzt fest unten rechts und lag am
   10.09.2026 gemessen GENAU unter der Leiste (aux-goto-top-btn, 35x35 bei
   oben 636, Leiste ab 652 - z-index 140 gegen 9990, der Pfeil verschwand
   also halb dahinter). Solange die Leiste steht, rueckt er darueber. Die
   Klasse am <body> setzt das Skript nur, wenn die Leiste wirklich sichtbar
   ist - ohne sie bleibt der Pfeil unangetastet, wo das Theme ihn haben
   will. */
@media (max-width:768px){body.hm-nav-leiste-an .aux-goto-top-btn{bottom:70px}}