Meine Bank, die Hamburger Sparkasse (Haspa) hat leider das normale HBCI-Verfahren eingestellt. Eigentlich hatten die mir den Zugang schon im Frühjahr gekündigt, jetzt aber zu Weihnachten lief der Zugang wirklich aus. Normalerweise hätte ich eher die Bank geopfert, als das Verfahren, aber auch andere Banken haben HBCI abgekündigt. Also musste ich mich mit der Umstellung auf ein TAN-Verfahren beschäftigen.

 

Vorbereitung

Auf Seiten der Haspa muss man auf alle Fälle das Chip-TAN Verfahren aktiviert haben. Im einfachsten Fall geht das auf der Webseite https://banking.haspa.de/. Für den Zugriff auf die Website und später auch das Konto über Moneyplex benötigt man eine PIN. Wie ich die von Urzeiten einmal bekommen habe weiß ich nicht mehr, aber ohne die kann man sich nicht anmelden. In dem Online-Portal kann man dann die verschiedenen Verfahren freischalten, zumindest wenn man noch eine TAN zur Verfügung hat.

Den notwendigen Menüpunkt hat die Haspa wirklich gut versteckt, jedenfalls suche ich jedesmal wieder eine Ewigkeit, eventuell wird der Punkt auch immer wieder neu versteckt, eine Art EasterEgg. Momentan kann man ihn finden, indem man sich einloggt, auf ein Konto geht und dort im roten Menü auf mehr klickt. Es taucht dann oben ein Menübereich auf. Hier darf man nicht auf Sicherheit -> PIN/TAN & Verschlüsselung gehen, sondern auf Verwalten & Einrichten -> Sicherheitseinstellungen -> TAN Verwaltung. Also logisch ist das für mich nicht, hier verwaltet man die Verfahren und nicht die TANs.

Manchmal taucht der Punkt Verwalten & Einrichten auch unten im roten Menü auf.

 

Schritt 1

Schon vor Jahren hatte ich mir einen Kartenleser von ReinerSCT beschafft, den cyberJack RFID Standard. Das Gerät gab es anfangs mit dem Personalausweis vergünstigt. Für das Gerät habe ich mir dann im Frühjahr, nach dem Haspa-Schreiben,  ein Firmware-Update gekauft. Bei den aktuellen Versionen sollte das Update nicht notwendig sein.

Auch schon im Frühjahr habe ich mir von Moneyplex das Update auf Version 2018 gekauft, da erst diese Version mit dem TAN-Verfahren umgehen kann. Auf der Matrica-Homepage ist von der Version 2018 noch nichts zu sehen, aber der freundliche und immer hilfsbereite Support hatte mir die Informationen zur Software und dem Kartenleser-Update gegeben.

Dann habe ich gewartet, bis die Haspa das bequeme und sichere HBCI-Verfahren abstellt. Das war jetzt am 11. Dezember der Fall.

 

Schritt 2

Also habe ich erst einmal die Kartenleser-Software auf meinem Ubuntu 18.04 System installiert. Dazu bin ich nach folgenden Texten vorgegangen:

* http://wiki.matrica.com/index.php/CCID_Chipkartenleser_unter_Linux

* http://wiki.matrica.com/index.php/Cyberjack

Konkret waren das die folgenden Schritte:

  • aus der Ubutu-Software-Verwaltung installieren: libccid libpcsclite1 pcscd pcsc-tools
  • von der Reinert-Homepage  http://www.reiner-sct.com/support/  den passenden Treiber laden: Support → Produktfamile Chipkartenleser → Chipkartenleser wählen → Treiber-Downloads → Linux  (bei mir Ubuntu 18.04) und installieren.
  • mittels lsusb sollte der Kartenleser erkannt werden. Hier die Hersteller und Produkt-ID auslesen, bei mir 0c4b:0500
  • die Datei /usr/lib/pcsc/drivers/ifd-ccid.bundle/Contents/Info.plist öffnen und in den Bereichen
    • ifdVendorID (0x voranstellen)
    • ifdProductID (0x voranstellen)
    • ifdFriendlyName (ich habe die ganze lange Zeichenkette genommen)
      um die Ausgaben von lsusb erweitern. Ich habe dafür immer die erste Zeile der Rubrik benutzt.
  • nun die Datei /lib/systemd/system/pcscd.service editieren und –auto-exit entfernen
  • den Dienst neu starten mittels service pcscd restart
  • und aktivieren systemctl enable pcscd.service

Danach war der Kartenleser funktionsfähig und der Test aus den Einstellungen von Moneyplex hat Erfolg gemeldet.

 

 

 

 

 

 

Schritt 3

Nun konnte ich auf der Haspa-Seite meine Konto-Karte aktivieren und synchronisieren.

 

 

 

 

 

 

Dazu muss man im Kartenleser mit eingelegter Karte eine TAN erzeugen und den sogenannten ATC (Application Transaction Counter) ablesen. Dabei handelt es sich um einen Zähler für die Zahl der erzeugten TANs (startet vermutlich bei 1).

 

 

 

 

 

 

Wenn beide Zahlen korrekt eingetragen sind, dann ist die Karte aktiviert.

Schritt 4

Nun war nur noch das Konto umzustellen. Leider hat hier der Text http://wiki.matrica.com/index.php/ChipTAN_USB_Verfahren nicht weit geholfen, da die Einstellmöglichkeit für das Verfahren nicht auftauchte.

Eine Mail an den Matrica-Support hat dann die Lösung gebracht, u.a. einen Link auf http://wiki.matrica.com/index.php/Bankzugang_ersetzen_Konto_beibehalten . Nach dieser Anleitung konnte ich dann mein Konto umstellen.
Noch eine Anmerkung zum Matrica-Support. Die Mail mit der Anleitung kam um 20:28h, meine Anfrage hatte ich um 19:49h gestellt, nachdem mich die Haspa aus ihrer Telefon-Warteschlange geworfen hatte. Der Matrica-Service ist wirklich nicht zu schlagen.

 

Hinweis

Bei der Kontoführung wir jeweils einmalig die PIN benötigt, die auch auf der Internet-Seite gilt. Die Geldautomaten-PIN spielt hier nirgends eine Rolle. Man kann die Karte und damit die TAN-Erzeugung zusätzlich mit einer PIN für den Kartenleser sichern, das ist aber nicht vorgegeben und auch nur spärlich erwähnt.

 

Meine Ausgabe von dmesg war unbrauchbar geworden, da hier nur noch Zeilen der Art:

 [38929.065531] [UFW BLOCK] IN=enp1s0 OUT= MAC=01:00:5e:00:00:01:00:24:c0:ff:ee:38:08:00 SRC=192.168.1.14 DST=224.0.0.1 LEN=36 TOS=0x00 PREC=0x00 TTL=1 ID=0 DF PROTO=2

zu finden waren.

Das sind abgelehnte Multicast-Pakete von meinem SAT>IP Receiver. An der Konsole habe ich eingegeben:

sudo ufw allow in proto udp to 224.0.0.0/4
sudo ufw allow in proto udp from 224.0.0.0/4

und dann die Datei /etc/ufw/before.rules  am Ende, vor der COMMIT-Zeile,  etwas ergänzt:

# allow IGMP
-A ufw-before-input -p igmp -d 224.0.0.0/4 -j ACCEPT
-A ufw-before-output -p igmp -d 224.0.0.0/4 -j ACCEPT

# don't delete the 'COMMIT' line or these rules won't be processed
COMMIT

Seit dem Neustart von UFW bleiben die Meldungen aus.

 

Schulen arbeiten meist mit Proxy-Servern. Einerseits um die Internetverbindung etwas schonen zu können, aber auch um die Internetzugriffe zu filtern.

In der Regel will man dafür aber nicht jeden Browser per Hand konfigurieren müssen. Daher gibt es Mechanismen, um die Konfigurationseinstellungen automatisch vornehmen zu können.

Dazu dient in der Regel eine Datei mit dem Namen wpad.dat (einige proprietäte Systeme erwarten den Namen proxy.pac).

Die Datei hat bei unserem IServ folgenden Inhalt:

function FindProxyForURL(url, host)
 {
  if (
   isPlainHostName(host)
   || dnsDomainIs(host, "local")
   || dnsDomainIs(host, "localhost")
   || dnsDomainIs(host, "schule-rlw.de")
   || isInNet(host, "127.0.0.1", "255.0.0.0")
   || isInNet(host, "10.0.0.0", "255.0.0.0")
  ) {
    return "DIRECT";
  } else {
   return "PROXY 172.27.16.2:3128"
  }
 }

Diese Datei kann man dem Client auf folgende Arten zukommen lassen:

1. Per DHCP

In der Konfigurationsdatei DES DHCP-Servers müssen sich die folgenden Zeilen finden:

option proxy-config code 252 = text;
option proxy-config "http://schule-rlw.de/wpad.dat";

Bei TFK-Boxen ist das im Schulrouter Plus unter Dienste -> DHCP-Server zu finden, dort erfolgt der Eintrag in das große Textfenster.

Der Bezeichner, hier proxy-config, ist frei wählbar, muss nur in beiden Zeilen gleich sein. Wesentlich ist die Code-Nummer.

2. Per DNS

Viele Systeme sind in der Lage Autokonfiguration aktiv zu suchen. Dazu rufen sie die URL http://wpad/wpad.dat auf. Es muss also nur ein entsprecchender Eintrag im Nameserver vorhanden sein und die wpad.dat im Wurzelverzeichnis des Webservers liegen. Als Port kommt übrigens nur 80 in Frage, ein Zugriff per https ist nicht konfigurierbar.

 

3. mozilla.cfg

Hat man Zugriff auf eine zentrale Konfigurationsdatei für den Mozilla firefox, so kann man hier die folgenden zeilen eintragen:

pref("network.proxy.autoconfig_url", "http://schule-rlw.de/wpad.dat");
pref("network.proxy.type",2);

Damit wird die automatische Konfiguration aktiviert und gleichzeitig auch der Pfad zur Konfigurationsdatei angegeben.

Hier nun eine verbesserte Version des Bootstrap Carousels. Diese Version zeigt alle Bilder an, die in den Seiten-Eigenschaften definiert sind. Zusätzlich werden die Metainformation des jeweiligen Bildes dargestellt. Ich habe mich dabei an der Vorlage unter Blog Teamgeist-Medien orientiert.

 lib.field_headerimage = COA

 lib.field_headerimage {
  wrap (
     <div id="skiplink">
       <a class="skip" title="Direkt zur Navigation springen" href="#navigation">Zur Navigation springen</a><br>
       <a class="skip" title="Direkt zum Content springen" href="#content">Zum Content springen</a>
     </div>
     <div id="blogo">
        <a href="/"><img src="fileadmin/user_upload/Logo_trans.png" /></a>
     </div>
     <div id="hslider" class="carousel slide carousel-fade" data-ride="carousel"  data-interval="5000">|</div>
  )
  #Hier hole ich die Bilder aus den Seiteneigenschaften(Ressourcen/Media) um die Navigation zu erstellen.
  10 = FILES
  10 {
    stdWrap.wrap = <ol class="carousel-indicators">|</ol>
    references {
      data = levelmedia:-1, slide
      treatIdAsReference = 1
    }
    renderObj = TEXT
    renderObj {
      wrap = <li data-target="#hslider" data-slide-to="|" class="active"></li>|*|<li data-target="#hslider" data-slide-to="|"></li>
      value = {register:FILE_NUM_CURRENT}
      insertData = 1
    } #Ende renderObj
  } #Ende 10

  #Hier nochmal das gleiche Spiel nur mit Ausgabe der Bilder
  20 = FILES
  20 {
    stdWrap.wrap = <div class="carousel-inner">|</div>
    references {
      data = levelmedia:-1, slide
      treatIdAsReference = 1
    }
    renderObj = COA
    renderObj {
      wrap = <div class="item active">|</div>|*|<div class="item">|</div>
      3 = IMAGE
      3 {
        stdWrap.wrap = |
        stdWrap.required = 1
        file.import.data = file:current:originalUid
        # Setze den Link der im Bild eingestellt ist um das Bild
        stdWrap.typolink.parameter.data = file:current:link
        altText.data = file:current:alternative
        titleText.data = file:current:alternative
      } #Ende 3
      # Hier Titel und Beschreibung für das Bild, wird auch vom Link umgeben.
      6 = COA
      6 {
        # alles nur, wenn Titel gesetzt ist
        if.isTrue.data = file:current:title
        wrap = <div class="carousel-caption">|</div>
        stdWrap.required = 1
        stdWrap.typolink.parameter.data = file:current:link
        4 = TEXT
        4.wrap = <h3>|</h3>
        4.data = file:current:title
         
        8 = TEXT
        8.wrap = <p>|</p>
        8.data = file:current:description 

      } #Ende 6
    } #Ende renderObj
  } #Ende 20
} #Ende headerimage

Letztendlich wird hier ein Carousel genau nach Beschreibung aufgebaut. Im Wrap ein paar vorbereitende Zeilen (inclusive überlagertem Logo) und dann der Kopf des Carousels mit der Geschwindigkeitsangabe und der Klasse zum Starten.

Danach wird dann unter 10 der Carousel-Indicator aufgebaut, dabei geht Typoscript durch alle Bilder. Wenn man den Indicator nicht haben möchte, dann kann man den ganzen 10er Block einfach weglassen.

Anschließend werden unter 20 die Bilder eingebunden und ggf. mit den Metadaten versehen.

Veröffentlicht unter typo3.

Für ein aktuelle Projekt brauchte ich einen Bilder-Slider im Header. Meine sonstigen Slider sind eher als Content-Elemente gedacht. Daher habe ich mich mit dem Bootstrap Carousel beschäftigt.

Der Slider soll mit dem Bildern aus der Seiteneigenschaft Resourcen arbeiten. Zur Vereinfachung gehe ich einfach davon aus, dass er die ersten drei Bilder benutzt. Bei Gelegenheit muss ich mir dann auch einmal Gedanken über eine Schleifenstruktur durch die vorhandenen Bilder machen.

Mit einer festen Zahl ist die Lösung recht einfach:

 lib.field_headerimage = COA
   lib.field_headerimage.10 = TEXT
   lib.field_headerimage.10.value (
     <div id="skiplink">
     <a class="skip" title="Direkt zur Navigation springen" href="#navigation">Zur Navigation springen</a><br>
     <a class="skip" title="Direkt zum Content springen" href="#content">Zum Content springen</a>
     </div>

    <div id="blogo">
     <a href="/"><img src="fileadmin/user_upload/Logo_trans.png" /></a>
    </div>
    <div id="hslider" class="carousel slide carousel-fade">
    <div class="carousel-inner">
   )

   lib.field_headerimage.20 = IMG_RESOURCE
   lib.field_headerimage.20 {
    file.import.data = levelmedia:2, slide
    file.treatIdAsReference = 1
    file.import.listNum = 0
    stdWrap.wrap = <div class='item active'><a href='/'><img src='|' style='width: 100%;' /></a></div>
   }

   lib.field_headerimage.30 = IMG_RESOURCE
   lib.field_headerimage.30 {
     file.import.data = levelmedia:2, slide
     file.treatIdAsReference = 1
     file.import.listNum = 1
     stdWrap.wrap = <div class='item'><a href='/'><img src='|' style='width: 100%;' /></a></div>
   }

   lib.field_headerimage.40 < lib.field_headerimage.30 
   lib.field_headerimage.40.file.import.listNum = 2
 
   lib.field_headerimage.90 = TEXT
   lib.field_headerimage.90 {
   value = {$styles.content.hspeed}
   wrap (
     </div></div>
     <script type='text/javascript'>$(document).ready(function(){
     $("#hslider").carousel({interval: |});
    });</script>
  )
}

Im ersten Textbereich werden ein paar Standars-Zeilen generiert und dann der Kopf des Carousels definiert. Über das Javascript im letzten Block wird das Carousel aktiviert. Grundsätzlich kann man das Carousel über Javascript oder folgenden Datenblock aktivieren:

<div id="hslider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">

Ich habe die Version per Javascript benutzt, einfach weil sich das aus meiner Vorlage so ergab und mir nicht klar war, ob das auch mit dem Fade funktioniert. Bei Gelegenheit werde ich aber auf die andere Variante ohne Javascript umstellen.

Normalerweise scrollen die Bilder, mit dem Fade-Effekt kommt es zu einer weicheren Überblendung.

 

Veröffentlicht unter typo3.

Für meine Typo3-Erweiterung nettgrids habe ich ein Accordion-Element (Bootstrap Collapse) erstellt. Für ein Projekte wollte ich jetzt erreichen, dass über einen Link jeweils der passende Tab geöffnet wird.

Nach etwas Experimentieren mit Anregung von https://stackoverflow.com/questions/22254248/bootstrap-3-expand-accordion-from-url#answer-33444574 bin ich zu folgendem Javascript gekommen:

<script type="text/javascript"> $("a").click(function () {     
  function show_tab(){
   if(location.hash != null && location.hash != "")
   {         $('.collapse').removeClass('in');
             $(location.hash + '.collapse').collapse('show');     
   }
    }
    window.setTimeout(show_tab, 100);
  }); 
</script>

Das Script kann man einfach in ein HTML-Element vor dem Accordion packen.

Im vorliegenden Listing wird die Javascript-Funktion gestartet, wenn auf einen Link auf der Seite geklickt wird. Man könnte es auch an andere Ereignisse koppeln.

In der Funktion show_tab wird überprüft, ob ein Anker-Links vorhanden ist. Wenn ja, dann wird der aktuelle Tab geschlossen und der Zieltab geöffnet. Um die Funktion herum liegt eine Funktion zur Verzögerung. Ohne Verzögerung wäre der neun Link mit dem Anker-Ziel noch aktuell und der Aufruf käme zu früh. Die Verzögerung ist hier auf 0,1 Sekunden eingestellt.

Veröffentlicht unter typo3.

Bei einem Typo3-Projekt sollten die Seiten jeder Hauptrubrik unterschiedliche Farben bekommen. Dafür kann man mit den Conditions von Typo3 schnell eine Lösung basteln.

In der Typoscript setup habe ich am Ende die folgenden Zeilen ergänzt:
 
 # 21 = Schulprofil
 [PIDinRootline = 21]
  page.bodyTagAdd = class="schulprofil"
 [global]
 
 # 31 = Schülerinnen+Schüler
 [PIDinRootline = 31]
  page.bodyTagAdd = class="schueler"
 [global]

...

Es handelt sich hier um bedingte Anweisungen (Conditions) in Typoscript. Die Zahlen sind jeweils die Seitennummern (PID) der ersten Seite einer Rubrik.

Wenn die jeweilige (Seiten-)Nummer in der rootline auftaucht, also auch in der Brotkrumenleiste stehen würde, dann ist die aktuelle Seite eine Unterseite (oder auch die Seite selber).

Dann wird der Body-Tag der Seite um einen Klassenbezeichner erweitert. Auf diese Klasse kann man dann im CSS Bezug nehmen:

.schulprofil #footer, .schulprofil #spalte-links, .schulprofil .breadcrumb {
   background-color: #ebd1d1;
 }

Hier werden also drei Elemente anhand der bedingten Klassenzuordnung gestaltet.

 

Nützliche Links:

Meine Schülerfirma Netthelp betreut eine Reihe von Kunden, die ihre Domains bei Domainfactory liegen haben. Wenn bei Netthelp ein Serverwechsel ansteht, dann taucht immer wieder das Problem auf, dass wir die Zugangsdaten der Kunden brauchen. Der letzte Zugriff auf die Domainverwaltung ist dann zum Teil schon mehrere Jahre her und die Zugangsdaten sind nirgends mehr im Zugriff. Dieses Problem trat bei den aktuellen Umstellungen massiv auf, da DF die Regeln für gültige Passwörter geändert hat und ungültige Passwörter dann deaktiviert hatte.

Unser erster Ansatz dieses Problem zu Lösen war eine Cluster-IP bei Strato. Diese IP ist relativ teuer 9,99€ im Monat und für uns nahezu nutzlos, da sie an einen Server-Vertrag gebunden ist. Wenn wir diesen Server wechseln, dann ändert sich auch die Cluster-IP.

Der einzige Ansatz der uns (Dank an Lukas Thiel) jetzt noch einfällt ist eine Domain-Weiterleitung auf eine Netthelp-Subdomain. Dabei muss man ein kleines bisschen tricksen, weil der Grund-Eintrag für linux-diskless.de keine cname sein darf, sondern ein A-Record erwartet wird. Der Trick besteht darin den Eintrag auf Domainfactory zu belassen und dann dort eine Header-Weiterleitung auf www.linux-diskless.de einzurichten. Der Eintrag für „www“ und sogar der für „*“ darf dann ein cname sein.

Für den MX-Eintrag wird ebenfalls linux-diskless.netthelp.de genutzt und keine Subdomain der jeweiligen Domain. Ein MX-Record muss in erster Instanz auf einen A-Record und darf nicht auf einen cname-Record verweisen.

Der einzige Schönheitsfehler besteht in der zwingenden Weiterleitung auf www.

Als Beispiel soll hier die Domain linux-diskless.de dienen:

  1. Ich lege einen A-Record linux-diskless.netthelp.de an, der auf die gewünschte Server-IP zeigt
  2. Nun gehe Ich zur Domain-Verwaltung von linux-diskless.de und lege unter Domain-Einstellungen eine Weiterleitung auf www.linux-diskless.de an (http:// oder wenn konfiguriert besser https://.
  3. Dann folgen die Verweise auf die Netthelp-Subdomain:

Für zukünftige Serverwechsel müssen wir jetzt nur noch den Eintrag für die Netthelp-Subdomain ändern Ein Zugriff auf den DF-Account des Kunden ist nicht mehr notwendig.

Weitere Informationen unter:

Bei einem Serverwechsel taucht immer wieder das Problem auf, dass man auch vorhandene Mailman-Listen umziehen möchte. Der Vorgang ist eigentlich ganz einfach. Die Beschreibung geht davon aus, dass Mailman auf dem Zielrechner bereits eingerichtet und funktionsfähig ist.

Im ersten Schritt müssen die Listen-Verzeichnisse aus den Ordnern

/var/lib/mailman/archives/private/
/var/lib/mailman/lists/

kopieren. Für jede Liste gibt es in den Ordnern ein gleichnamiges Verzeichnis und in dem Archivordner noch jeweils eines mit der Extension .mbox. Diese Verzeichnisse werden einfach auf den neuen Server kopiert und dem richtigen Eigentümer übereignet. Unter Ubuntu gehören die Dateien in der Regel lists.list und die übergeordneten Verzeichnisse root.list.

Die Eigentümer müssen jeweils noch richtig gesetzt werden.

Dann geht es noch an zwei Dateien im Verzeichnis data:

aliases
virtal-mailman

Hier finden sich für jede Liste mehrere Zeilen mit den Weiterleitungen. Die benötigten Zeilen holt man sich vom alten Server und hängt sie an die Dateien auf dem neuen Server an. Am Ende müssen die entstandenen Dateien noch in das benutzte Datenbank-Format umgewandelt werden:

/usr/lib/mailman/bin/genaliases

oder man wartet bis mailman das selber macht.

Danach kann man dann vorsichtshalber mailman neu starten.

Falls es Probleme mit der URL für die Liste gibt, so ist wichtig zu wissen, dass die Listenkonfiguration in der Datei:

/var/lib/mailman/lists/<listenname>/config.pck

steckt. Diese Datei kann man z.B. mittels

withlist -l -r fix_url <listname> -u mailman.yyy.com

bearbeiten.

 

Weitere Hinweise unter:

Bei kleinen Grafiken ist der Verwaltungsaufwand beim Laden relativ groß, verglichen mit dem Datenvolumen. Hier bietet es sich an die Grafiken in eine Data-URL umzuwandeln, die direkt im Seitenquelltext angegeben wird.

Gegeben sei die folgende Grafik <img src=“sidebar_more.png“>


Ihre Größe beträgt hier 627 Bytes, was schon relativ viel ist. Mittels:

php -r "echo base64_encode(file_get_contents('sidebar_more.png'));"

wird daraus eine Zeichenkette aus 836 Zeichen, die direkt per Copy&Paste in den Link integriert werden kann (der Teil nach dem Komma):

 <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAMgAAAAaCAIAAAEKy7R7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhVJREFUeNpi1IqewEAlwPLz2yeqmfXt01uqmZWqdYBaZgEEEOOgCy8erh9fvnFQJ7zA7vlKzfACCCBG9fAuhsEHWL5/fj94XNORZ1kx6TgotERt0gZhaAEEEDUTPTUj8e+fX4PRWX9+/RgkTrmzrlYlqBnqrN8/vw+eQOJg+fD5KzsobUk65w/KSBxMoYVwVqbhyUHoLIAAYtSM7GMYBcQmrd8/RkNhaOfDAQf3NjUByaqp01bsfIEIrN8/v40GDSawSy6+/4QRPWX9Hk1Z2MCtu4O7TTP4AUAADdLm8iAt4P//+zcaCsQG1r9/f0ZDgejA+jsaWKOBRQFoyzbZefzywXM/MQLrz+/R0EEDf//8nVtT9u/fP5WABpTA+juasrCA/0BsHFv69y87StNBxq14NGzQgLUR9+Vb7z99YUPPhqMpCxMcOv2RgYGJgeHPaJk1WhuOBtagC6xsk7OjoUAkAAgwFs2o/tFQGAW0GHT4OxoKo4AGdeHoAM0ooEnC+jOasEYBUcBQneH5m+9fvjN8+cY52nofBVQDgQ7GkW4+QMbxK6eL+9d9+8Hw+SsHzoT19+/ogMMoIA78/w+hLXVMd0/RLOyfuuv4ZzxV4WjCGgVEAWYmpp+/foSWN9978g1zABkNMEq7FI4G2SigfuN9tCocBbTpFY423kfB6HDDKBgyCSvL+PRoKIwCqgOm">

Und hier als Data-Image eingebunden:

Damit entfällt das zusätzliche Laden der Datei.