diff --git a/web/features-de.htm4 b/web/features-de.htm4
index 9580504d..c0cdd230 100644
--- a/web/features-de.htm4
+++ b/web/features-de.htm4
@@ -1,221 +1,225 @@
 m4_dnl                                                     -*- html -*-
 m4_include(`template.m4')
 m4_dnl $Id$
 
 m4_define(`DE')
 m4_define(`EN_FILE', `features.html')
 m4_define(`features-de.html', `0')
 
 m4_define(`TITLE', `Funktionen')
 m4_define(`MAIN', `about')
 
 PAGE_START
 
 <div id="intro">
 <h2>Funktionen</h2>
 <p>Gpg4win stellt höchste Anforderungen an die Sicherheit. Sichere
 Datei- und E-Mail-Verschlüsselung sowie eine einfache
 Handhabung sind die Schwerpunkte von Gpg4win.
 Erfahren Sie hier, welche Funktionen in Gpg4win stecken!</p>
 </div>
 
 <div id="full">
 
 <h2>Sicherheit</h2>
 
+<div class="flex-container">
+    
 <div class="column1">
 <h4>OpenPGP & S/MIME</h4>
 <p>Gpg4win unterstützt die beiden kryptografischen Standards OpenPGP und S/MIME (X.509).</p>
 <p>Das Einrichten von X.509-Wurzelzertifikaten ist durch Gpg4win stark
 vereinfacht worden und ermöglicht so auch unerfahrenen Anwendern die
 einfache Verwendung von S/MIME.
 Für komplexere Anforderungen werden Systemadministratoren durch eine Anleitung
 bei der Einrichtung einer systemweiten Wurzel-Vertrauensstellung
 unterstützt.</p>
 <img src="img/sc-pinentry-openpgp_de.png">
 </div>
 
 <div class="column2">
 <h4>Hohe Algorithmenstärken in GnuPG</h4>
 <p>Gpg4win ist die offizielle <a href="http://gnupg.org">GnuPG</a> Distribution für Windows und bietet
 damit die gewohnt hohe Sicherheit von GnuPG. GnuPG hält sich an die
 Empfehlungen des <a href="http://www.bsi.bund.de/Algorithmenkatalog.html">Bundesamtes
 für Sicherheit in der Informationstechnik (BSI)</a>.</p>
 
 <p>Bei der Erstellung von OpenPGP- und X.509-Zertifikaten wird eine
 voreingestellte Schlüssellänge von 2048 bit verwendet. Als Signatur- und Verschlüsselungsverfahren
 kommt RSA zum Einsatz.</p>
 
 </div>
 
 <div class="column3">
 <h4>SmartCard</h4>
 <p>Gpg4win unterstützt (durch GnuPG) die sichere Nutzung von
 SmartCards für OpenPGP und S/MIME. Technische Details (in Englisch) finden Sie bei <a
 href="http://www.gnupg.org/documentation/howtos.de.html#GnuPG-cardHOWTO">GnuPG</a>.</p>
 <img src="img/gnupg.png">
 </div>
 
+</div>
+
 <br clear="all"/>
 
 <h2>Dateien und Ordner</h2>
 <div class="column1">
 <h4>Signieren/Verschlüsseln</h4>
 <p>Signieren Sie Dateien und Ordner direkt aus dem Windows Explorer - 
 mit dem Add-on GpgEX. Sie können auch mehrere Dateien und ganze 
 Ordner auswählen und diese dann über das Kontext Menü signieren/ verschlüsseln. Dann erhalten Sie eine Datei, die beim Empfänger
 geprüft und entschlüsselt werden kann. Das technische Archivformat dieser Datei ist
 gpgtar.</p>
 </div>
 
 <div class="column2">
 <h4>Prüfsummen</h4>
 <p>Erstellen und überprüfen Sie Prüfsummen von Dateien - ebenfalls
 direkt aus dem Windows Explorer. Gpg4win legt (rekursiv) für jede
 ausgewählte Datei eine eindeutige Prüfsumme ab und sichert damit die
 Unverändertheit (Integrität) der Dateien. Das Überprüfen dieser
 Prüfsummen funktioniert ebenso einfach wie das Erstellen.
 Gpg4win unterstützt die Verfahren sha1sum, sha256sum und md5sum.</p>
 </div>
 <div class="column3">
 <img src="img/t250.sc-gpgex-contextmenu-signEncrypt_de.png">
 </div>
 
 <br clear="all"/>
 
 <h2>E-Mail</h2>
 <div class="column1">
 <h4>Signieren und Verschlüsseln</h4>
 <p>Das mitgelieferte Outlook-Plugin GpgOL ermöglicht E-Mails direkt
 in Microsoft Outlook zu signieren und zu verschlüsseln. Dabei werden auch
 Anhänge verschlüsselt. Das Signaturprüfen und Entschlüsseln
 funktioniert genauso einfach direkt in Outlook.
 </p>
 <a href="img/sc-ol-emailfolder_cut_de.png">
 <img src="img/t250.sc-ol-emailfolder_cut_de.png"></a>
 </div>
 
 <div class="column2">
 <h4>Benutzerfreundliche Zertifikatsauswahl</h4>
 <p>Die Auswahl des richtigen E-Mail-Zertifikats übernimmt Kleopatra - und
 zwar anhand der richtigen E-Mail-Adresse.
 Sollten Sie mehrere passende
 Zertifikate installiert haben, bietet Kleopatra Ihnen die Zertifikatsvorauswahl
 in einem übersichtlichen Dialog an.</p>
 <img style="width: 540px;"
 src="img/sc-kleopatra-mail-certificateselection-signencrypt_de.png">
 </div>
 
 <div class="column3">
 <h4>&nbsp;</h4>
 <p>Für "Viel-Benutzer" bietet Gpg4win die Möglichkeit, die
 Zertifikatsbestätigung nur im Konfliktfall anzuzeigen. Damit entfällt
 z.B. das regelmäßige Bestätigen eines eindeutig passenden
 Zertifikats beim E-Mail signieren und verschlüsseln.
 Das Arbeiten läuft so wesentlich zügiger - ohne Verlust der
 Sicherheit.
 </p>
 </div>
 
 <br clear="all"/>
 
 
 <h2>Installation und Kompendium</h2>
 
 <div class="column1">
 <h4>Installationsassistent</h4>
 <p>Der Gpg4win-Installationsassistent erleichtert
 das einfache und sichere Installieren von
 Gpg4win. Eine konkrete Schritt-für-Schritt-Anleitung für die Installation
 bekommen Sie im <a
 href="http://gpg4win.de/doc/de/gpg4win-compendium_11.html">Gpg4win-Kompendium</a>.</p>
 </div>
 
 <div class="column2">
 <h4>&nbsp;</h4>
 <a href="img/sc-inst-welcome_de.png"><img  src="img/sc-inst-welcome_de.png"></a>
 </div>
 
 <div class="column3">
 <h4>Gpg4win-Kompendium</h4>
 <p>Eine anschauliche und umfassende Dokumentation über den
 Einstieg in
 die Kryptografie und die Verwendung von Gpg4win bietet das
 <a href="documentation-de.html">Gpg4win-Kompendium</a>.
 Es ist verfügbar in deutscher und englischer Sprache.</p>
 </div>
 
 <br clear="all"/>
 
 <h2>Zertifikatsverwaltung mit Kleopatra</h2>
 
 
 <div class="column1">
 <h4>Zertifikate sicher und komfortabel verwalten</h4>
 <p>Kleopatra ist der bevorzugte Zertifikatsmanager in Gpg4win.
 Kleopatra ermöglicht Ihnen die einfache Verwaltung aller Zertifikate
 (OpenPGP und S/MIME).</p>
 <a href="img/sc-kleopatra-mainwindow-openpgp-certificates_de.png">
 <img style="width:540px;" src="img/sc-kleopatra-mainwindow-openpgp-certificates_de.png"></a>
 </div>
 <div class="column2">
 <h4>Zertifikatsserver</h4>
 <p>Kleopatra bietet einen einfachen Im- und Export von Zertifikaten
 von bzw. zu OpenPGP-Zertifikatsservern (auch Schlüsselserver) und
 X.509-(LDAP-)Zertifikatsservern.</p>
 </div>
 <div class="column3">
 <h4>OpenPGP-Zertifikate beglaubigen</h4>
 <a href="img/sc-kleopatra-certifyCertificate1_de.png">
 <img src="img/sc-kleopatra-certifyCertificate1_de.png"></a>
 <p>Durch das Beglaubigen (auch Signieren) eines anderen, Ihnen
 vertrauten, OpenPGP-Zertifikats bringt Kleopatra dieses Zertifikat in
 eine neue Vertrauensstufe - gekennzeichnet als "vertrauenswürdiges
 Zertifikat".
 </<p>
 </div>
 
 <br clear="all"/>
 
 <h2>Weiteres Wissenswertes</h2>
 <div class="column1">
 <h4>Freie Software</h4>
 <p>Gpg4win ist Freie Software und besteht aus einer ganzen Reihe von
 unabhängig entwickelten Paketen, die teilweise unterschiedliche
 Lizenzen haben. Der Großteil dieser Software steht, wie Gpg4win
 selbst, unter der GNU General Public License (GNU GPL).
 Für die Nutzung von Gpg4win entstehen keine Lizenzkosten.
 </div>
 
 <div class="column2">
 <h4>Systemunterstützung</h4>
 <p>Details zu den Systemanforderungen finden Sie auf <a
 href="system-requirements-de.html">der entsprechenden Seite</a>.</p>
 </div>
 
 <div class="column3">
 <h4>Internationalisierung</h4>
 <p>Alle Dialoge in Gpg4win sind vollständig in deutscher und englischer Sprache
 verfügbar. Der Gpg4win-Installer bietet darüber hinaus weitere
 Sprachen an.</p>
 </div>
 
 </div>
 
 <!--
 <div id="sidebar">
 <h3>Funktionen in Gpg4win</h3>
 
 <ul class="cleanlist">
 <li><a href="#">Sicherheit</a></li>
 <li><a href="#">Dateien und Ordner</a></li>
 <li><a href="#">E-Mail</a></li>
 <li><a href="#">Systemunterstützung</a></li>
 <li><a href="#">Gpg4win-Kompendium</a></li>
 <li><a href="#">Internationalisierung</a></li>
 <li><a href="#">Freie Software</a></li>
 <li><a href="#">Gpg4win-Installer</a></li>
 <li><a href="#">Kleopatra</a></li>
 </ul>
 </div>
 -->
diff --git a/web/gpg4win.css b/web/gpg4win.css
index b0e47f92..e0f40922 100644
--- a/web/gpg4win.css
+++ b/web/gpg4win.css
@@ -1,1035 +1,1067 @@
 /* Styles for the Gpg4win Website */
 
 body {
  font-family: arial, helvetica, sans-serif;
  font-size: 13px;
  background: #FFFFFF url('img/page_bg.png') repeat-x;
  color: #333333;
  margin: 0px;
  padding:0px;
 }
 
 a {
  color: #b51a22;
  text-decoration: none;
 }
 
 a:hover {
  text-decoration: underline;
 }
 
 img {
  border: 0px;
 }
 
 .imageframe {
  border-color: #DEDEDE #AAAAAA #888888 #CECECE;
  border-style: double;
  border-width: 1px;
  padding: 5px;
 }
 
 .imgfloatleft {
  float: left;
  margin: 0px 20px 30px 0px;
 }
 
+.flex-container{
+    display: flex;
+}
+
 td {
  vertical-align: top;
 }
 
 .odd td {
  background: #E6E6E6;
 }
 
 .wrapper {
  width: 900px;
  margin: 0 auto;
  text-align: left;
 }
 
 .language_select {
  float:right;
  height: 100%;
 }
 
 .logo {
  margin-top: 20px;
  margin-left: 15px;
 }
 
 .header {
  padding: 6px 0 6px 0;
  margin-bottom: 0px;
  height: 1em;
 }
 
 .fancy_intro {
  background: url('img/fancy_bg.png') no-repeat;
  background-position: 276px 0px;
  height:250px;
  margin: 0 20px 25px 14px;
  border-bottom:1px solid gray;
  overflow: hidden;
  width:870px;
  padding-bottom: 15px;
 }
 
 .mini_intro {
  clear: both;
  font-size: 12px;
  line-height: 38px;
  margin-top: 8px;
 }
 
 #download_button {
  position: relative;
  top: 45px;
  width: 250px;
  z-index: 0;
 }
 
 #download_button a {
  background: url('img/download_button.png');
  background-repeat: no-repeat;
  display: block;
  height: 116px;
  width: 260px;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  font-size: 19px;
 }
 
 #download_button a:hover {
  background-position: 0px -116px;
 }
 
 #download_button .text {
  position: relative;
  top: 23px;
  left: 25px;
 }
 
 #breadcrum {
  float:left;
 }
 
 #download_button_mini {
  position: relative;
  top: 45px;
  left: 35px;
  width: 250px;
  z-index: 0;
 }
 
 #download_button_mini .links {
  position: relative;
  font-size: 10px;
  text-align: right;
 }
 
 #download_button_mini .dmini_button {
  background: url('img/download_button_mini.png');
  background-repeat: no-repeat;
  display: block;
  height: 50px;
  width: 189px;
  text-align:left;
  left: 20px;
  font-size: 14px;
  line-height:50px;
  color: #FFFFFF;
  font-weight:bold;
  text-decoration:none;
 }
 
 #download_button_mini .dmini_button:hover {
  background-position: 0px -50px;
 }
 
 #download_button_mini .text {
  position: relative;
  left: 12px;
 }
 
 .download_button_links {
  font-size:11px;
  position: relative;
  left: 25px;
  top: 43px;
  width: 250px;
 }
 
 .donate_box {
   border-radius: 4px;
   background: #FDF1CD;
   border: 1px solid #CCCCCC;
   padding: 20px 20px 15px;
   min-height: 365px;
 }
 .donate_box h3 {
   margin: 0;
 }
 .donate_box #download_div {
   margin-top: 15px;
 }
 
 #currencyfield {
     font-size: 14px;
     height: 30px;
 }
 .donateButton {
     background: url('img/download-arrow.png') no-repeat 9px 9px;
     background-size: 20px 20px;
     padding-left: 36px;
     padding-right: 10px;
     font-size: 14px;
     height: 40px;
     border: 2px white;
     border-radius: 4px;
     text-align: center;
     font-weight: bold;
     text-decoration: none;
 }
 a>.donateButton{
   margin-top: 40px;
 }
 
 
 .donate_box blockquote {
     line-height: 150%;
 }
 .donate_box .pay-logo {
     width: 100px;
 }
 
 .donate_box .qrcode {
     width: 130px;
 }
 
 /* donation slider */
 input[type='range'] {
     -webkit-appearance: none;
     appearance: none;
     -moz-appearance: none;
     border-radius: 5px;
     box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
     background-color: #FFF;
     height: 8px;
     vertical-align: middle;
     width: 200px;
     cursor: pointer;
     margin: 10px 0;
 }
 input[type=range]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     appearance: none;
     border-radius: 5px;
     box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
     background-color: #FFF;
     height: 10px;
     vertical-align: middle;
     border: solid 1px rgba(0,0,0,0.25);
     cursor: pointer;
 }
 input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     border-radius: 10px;
     background-color: #FFC35C;
     box-shadow: inset 0px 1px 0px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
     border-radius: 15px;
     vertical-align:middle;
     margin-top: -6px;
     cursor: pointer;
 }
 input[type='range']::-moz-range-track {
     -moz-appearance: none;
     border-radius: 5px;
     box-shadow: inset 1px 1px 1px rgba(000,000,000,0.25);
     background-color: #FFF;
     height: 8px;
     border:solid 1px rgba(0,0,0,0.25);
     vertical-align: middle;
     margin: 0;
     padding: 0;
     cursor: pointer;
 }
 input[type='range']::-moz-range-thumb {
     -moz-appearance: none;
     border-radius: 10px;
     background-color: #FFC35C;
     box-shadow:inset 0px 1px 0px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
     border-radius: 15px;
     cursor: pointer;
 }
 
 /* With beta this needs other offsets. Maybe someone with
  * more CSS skills could make this more relative / robust. ;-) */
 .h_text_beta {
  position: relative;
  top: -190px;
  left: 669px;
  width: 180px;
  font-size: 11px;
  border-left: 1px solid #CCCCCC;
  padding-left: 10px;
  margin-top: 12px;
  height: 220px;
 }
 
 .h_text_beta .heading {
  font-size: 23px;
  font-family: georgia, times, serif;
  padding-bottom: 9px;
 }
 
 .h_text_beta .serif_word {
  font-size: 13px;
  font-weight: bold;
 }
 
 .h_text_beta .limiter {
  border-bottom: 3px dotted #CCCCCC;
  width: 190px;
  height: 10px;
  margin-bottom: 3px;
 }
 
 .h_text {
  position: relative;
  top: -125px;
  left: 656px;
  width: 202px;
  font-size: 11px;
  border-left: 1px solid #CCCCCC;
  padding-left: 10px;
  margin-top: 12px;
  height: 220px;
 }
 
 .h_text .heading {
  font-size: 23px;
  font-family: georgia, times, serif;
  padding-bottom: 9px;
 }
 
 .h_text .serif_word {
  font-size: 13px;
  font-weight: bold;
 }
 
 .h_text .limiter {
  border-bottom: 3px dotted #CCCCCC;
  width: 190px;
  height: 10px;
  margin-bottom: 3px;
 }
 .center {
  text-align: center;
 }
 
 .content {
  width: 100%;
+ max-width: 100vw;
 }
 
 #intro {
  padding: 0px 250px 20px 20px;
 }
 
 /*#intro span {
  background: url('img/logo.png') no-repeat scroll 50px 0px transparent;
  height: 56px;
  margin: 0px;
  width: 250px;
  float: right;
  margin: 0px;
  line-height: 24px;
  margin: 10px 200px 0 0;
 }*/
 
 #intro h2 {
  font-family: georgia, times, serif;
  font-size: 30px;
  font-weight: normal;
  color: #333333;
  margin: 0px;
 }
 
 #intro p {
  color: #555555;
  font-size: 14px;
  font-weight: normal;
  line-height: 26px;
  margin: 10px 0 0;
  padding: 0;
 }
 
 .column1, .column2, .column3 {
- display: inline;
- float: left;
  margin-right: 25px;
- position: relative;
  width: 270px;
 }
 
 .column3 {
  margin-right: 0px;
 }
 
 .column1 img, .column2 img, .column3 img {
  width: 270px;
 }
 
 
 #main {
  float: left;
  padding: 0px 0px 0px 20px;
  width: 600px;
 }
 
 #full {
  float: left;
  padding: 0px 20px 0px 20px;
  width: 860px;
 }
 
 #main h2, #full h2 {
  font-size: 22px;
  font-weight: normal;
  color: #333333;
  margin: 30px 0px 10px 0px;
  padding: 0px;
  clear: both;
 }
 
 #main h4, #full h4 {
  font-size: 18px;
  color: #333333;
  font-family: georgia, serif;
  font-style: italic;
  font-weight: normal;
 }
 
 #main p, #full p, #main li, #full li{
  color: #444444;
  line-height: 20px;
  margin: 0px 0px 10px;
 }
 .lineheight {
  line-height: 20px;
 }
 .cleanlist li {
  font-size: 13px;
  list-style: none;
  padding: 0px;
  clear: both;
 }
 
 .screenshots img {
  width: 250px;
 }
 
 #sidebar {
  -moz-border-radius: 10px 10px 10px 10px;
  background: #FDF1CD;
  border: 1px solid #CCCCCC;
  float: right;
  margin-top: 34px;
  padding: 20px 20px 15px;
  width: 220px;
 }
 
 #sidebar h3 {
  color: #333333;
  margin: 1px 0px 10px 0px;
 }
 
 #sidebarsimple {
  float: right;
  margin-top: 34px;
 }
 
 .newslist {
  margin: 0px;
  padding: 0px;
 }
 
 .newslist li {
  font-size: 13px;
  list-style: none;
  padding: 0;
  border-bottom: 1px solid #EFEFEF;
 }
 
 .newslist > li > a {
  /*color: #555555;*/
  display: block;
  font-size: 12px;
  font-weight: bold;
  list-style: none;
  margin: 0px;
  padding: 10px 0px 10px 0px;
  text-decoration: none;
 }
 
 .newslist li p {
  color: #777777;
  font-size: 10px;
  font-weight: normal;
  margin: 4px 0px 0px;
  padding: 0px;
 }
 
 #menu {
  height:45px;
  z-index: 1;
 }
 
 #menu .active a {
  background-position: 0px -180px;
 }
 
 #menu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
 }
 
 #menu li {
  float: left;
  margin-right: 0px;
  margin-left:0px;
  padding: 0px;
  text-align: center;
 }
 
 #menu .mlogo {
  border:0px;
 }
 
 #menu .mlogo a {
  display:block;
  /* With what's new shield */
  width: 161;
  /* Without shield
   width: 307px
  */
  height: 58px;
  position: relative;
  top: -13px;
  background: url('img/inmenulogo.png');
  background-position: 0px -116px;
 }
 
 #menu .mlogo a:hover {
  background: url('img/inmenulogo.png');
  /* With what's new shield */
  background-position: 0px -58px;
  /* Without shield
  background-position: 0px -174px */;
 }
 
 #menu .mwhatsnew  {
  border:0px;
  line-height: 2em;
 }
 
 #menu .mwhatsnew a {
  display:block;
  width: 110px;
  height: 77px;
  position: relative;
  top: -9px;
  background: url('img/whatsnew.png');
  line-height: 34px;
 }
 
 #menu .mwhatsnew a:hover {
  background: url('img/whatsnew.png');
  background-position: 0px -77px;
 }
 
 #menu .mwhatsnew div {
  font-size: 120%;
  padding-top: 10px;
  line-height: 24px;
 }
 
 #menu .mbetween {
  border:0px;
 }
 
 #menu .mbetween a {
  display:block;
  width: 36px;
  height: 58px;
  position: relative;
  top: -13px;
  background: url('img/inmenulogo.png');
  background-position: -100px 0px;
 }
 
 #menu .mbetween a:hover {
  background: url('img/inmenulogo.png');
  background-position: -100px -58px;
 }
 
 #menu .last {
  width:40px;
  height: 45px;
  background: url('img/last.png');
 }
 
 #menu .mdonate a {
  display: block;
  width: 148px;
  height: 45px;
  float:right;
  background: url('img/inmenudownload.png');
  color: #FFFFFF;
  text-indent: -10px;
 }
 
 #menu .mdonate a:hover {
  background: url('img/inmenudownload.png');
  background-position: 0px -45px;
 }
 
 #menu li a {
  background: #CCCCCC url('img/menubar.png') 0px -90px;
  color: #2A2A2A;
  line-height: 45px;
  width: 148px;
  display: block;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
  height: 45px;
  overflow: hidden;
 }
 
 #menu li a:hover {
  background: #FFFFFF url('img/menubar.png') 0px -135px;
  color:#FFFFFF;
 }
 
 #menu ul li ul {
  width: 201px;
  list-style: none;
  position: absolute;
  display: none;
 }
 
 #menu ul li ul li,
 #menu .active ul li ul li {
  width: 148px;
 }
 
 #menu ul li .subcap {
  background: url('img/sub_tail.png');
  display: block;
  width: 149px;
  height: 5px;
 }
 
 #menu ul li ul li a,
 #menu .active ul li ul li a {
  background: url('img/sub_bg.png');
  line-height: 25px;
  width: 142px;
  height: 22px;
  font-weight: normal;
  color: #2A2A2A;
  text-align: left;
  display: block;
  padding-left: 5px;
  border-left: 1px solid #8B7E57;
  border-right: 1px solid #8B7E57;
 }
 
 #menu ul li ul li a:hover,
 #menu .active ul li a:hover {
  background: #FBCA4C;
  color: #2A2A2A;
  text-decoration: none;
  font-weight: bold;
 }
 
 #menu li:hover ul ul,
 #menu li:hover ul ul ul {
  display: none;
 }
 
 #menu li:hover ul,
 #menu li li:hover ul,
 #menu li li li:hover ul {
  display: block;
  z-index:3;
 }
 
 .donate_header {
  display: block;
  position: relative;
  top: -80px;
  height: 180px;
  background: url('img/heart.png') no-repeat;
  background-position: 550px 10px;
  font-size: 26px;
  border-bottom: 1px solid #CCCCCC;
  margin-bottom: -70px;
  z-index: -100;
 }
 
 .donate_header .text {
  position:relative;
  left: 180px;
  top: 40px;
  text-align:center;
 }
 
 .donate_header b {
  color: #D50D35;
 }
 
 .download_header {
  height:160px;
  background: url('img/download_bg.png') no-repeat;
  background-position: 690px 10px;
  font-size:26px;
  border-bottom: 1px solid #CCCCCC;
  margin-bottom:8px;
 }
 
 .download_header .text {
  position:relative;
  left: 120px;
  top: 40px;
  text-align:center;
 }
 
 .download_header b {
  color: #D50D35;
 }
 
 .dlbutton2 a {
  background-color: #6AC221;
  border-radius: 10px 10px 10px 10px;
  display: block;
  font-size: 150%;
  font-weight: bold;
  margin: 10px 20px 0 0;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
 }
 
 .dlbutton2 a:hover {
  background: #81C72B;
  text-decoration: none;
 }
 
 .dlbutton2 img {
  float:right;
  position: relative;
  right: 45px;
  top: 8px;
 }
 
 .version {
  color: #FFFFFF;
  font-size: 75%;
  font-weight: normal;
 }
 
 #footer {
  background: #EBEBEB url('img/page_bg.png') repeat-x;
  font-size: 11px;
  padding-bottom: 20px;
  color: #333333;
  text-align: center;
  margin-top: 30px;
  height: 22em;
  width: 100%;
 }
 
 #sitemap {
  margin: auto;
  width: 900px;
  text-align: left;
 }
 
 #sitemap ul {
  list-style:none;
  float: left;
  width: 130px;
  margin-left: 20px;
  padding: 0px;
 }
 
 #sitemap li {
  font-size: 12px;
  line-height: 19px;
  padding: 0px;
 }
 
 #sitemap li {
  font-size: 12px;
  line-height: 19px;
  padding: 0px;
 }
 
 #sitemap ul li a {
  color: #555555;
  text-decoration: none;
 }
 
 #sitemap ul li a:hover {
  text-decoration: underline;
 }
 
 .social-icon {
   margin-top: 10px;
   width: 32px;
   padding-right: 5px;
 }
 
 hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #ccc;
   margin: 1em 0;
   padding: 0; 
 }
 
 /* donation form */
 .tabs{
 	list-style: none;
 	width: 100%;
 	float: left;
 	height: 290px;
 	padding-left: 0;
 	position: relative;
 }
 .tabs li label[for^=tab]{
 	clear: right;
 	margin-right: 10px	 !important;
 	background-color: transparent;
 	border: none;
 	border-radius: 4px;
 	width: 120px;
 	text-align: center;
 }
 .tabs .tab-content{
 	display: none;
 	position: absolute;
 	overflow: hidden;
 	right: 0;
 	top: 0;
 	width: 68%;
 	height: 100%;
 	border-left: 1px dotted #ccc;
 	padding-left: 20px;
 }
 .tabs [id^="tab"]:checked ~ [id$="_tab"]{
 	display: block;
 }
 .download_div{
 	display:none;
 }
 
 textarea, select, input[type=text]{
 	box-sizing: border-box;
 	box-shadow: inset 0 1px 2px #ddd;
 	border: 1px solid #bbb;
 	border-radius: 4px;
 	padding: 5px;
 	width: 100%;
 }
 input[type=text]{
 	height: 31px;
 }
 input[type=text]:focus{
 	border: 1px solid #888;
 }
 select{
 	background-color: #fff;
 }
 
 /* donation list */
 .two-column {
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
     -moz-column-count: 2; /* Firefox */
     column-count: 2;
 	list-style: none;
 	padding-left: 15px;
 }
 .three-column {
     -webkit-column-count: 3; /* Chrome, Safari, Opera */
     -moz-column-count: 3; /* Firefox */
     column-count: 3;
 	list-style: none;
 	padding-left: 15px;
 }
 .two-column > li, .three-column > li{
 	margin: 0 5px 10px !important;
 	float: none;
 }
 #sponsors > h3 {
 	margin: 20px 0px 5px;
 	padding-bottom: 5px;
 }
 .sponsornames {
 	padding: 10px;
 	background-color: #eee;
 }
 .sponsornames > h4 {
 	font-size: 17px;
 	margin: 10px 15px;
 	border-bottom: 1px dotted #555;
 	padding-bottom: 5px;
 }
 
 .pay_div{
 	width: 100%;
 }
 
 .amountlabel {
 	margin: 15px 0 20px 0;
 	float: left;
 	clear: right;
 	width: 100%;
 }
 .amountlabel > input[type="radio"]{
 	display:none;
 }
 .amountlabel > label{
 	border-radius: 4px;
 	font-size: 16px;
 	padding: 10px 15px;
 	text-align: center;
 	margin: 0 7px 1px 3px;
 	font-weight: bold;
 	width: 65px;
 }
 
 /*** donate button colors ***/
 /* inactive */
 .amountlabel > input + label,
 .switch-field input + label,
 .donateButton {
     color: white;
 }
 .amountlabel > label,
 .switch-field label {
 	background-color: rgba(180,180,180,0.75);
 }
 
 /* hover */
 .amountlabel > label:hover,
 .amountlabel > input[type="radio"]:hover + label:hover,
 .switch-field label:hover,
 .donateButton:hover {
 	background-color: #8fc8d2;
     cursor: pointer;
 }
 
 /* active */
 .amountlabel > input[type="radio"]:checked + label,
 .amountlabel > label > input[type="number"]:focus + label,
 .switch-field input:checked + label,
 .donateButton {
 	background-color: #179bd7;
 }
 
 
 
 input[type=number]::-webkit-outer-spin-button,
 input[type=number]::-webkit-inner-spin-button {
       -webkit-appearance: none;
       margin: 0;
 }
 
 input[type=number] {
       -moz-appearance:textfield;
 }
 
 .amountlabel > label > input[type="number"]{
       background-color: transparent;
       color: white;
       border: none;
       border-bottom: 1px solid;
       border-radius: 0px;
       box-shadow: none;
       height: 20px;
       font-size: 18px;
       font-family: arial, helvetica, sans-serif;      
       text-align: center;
       width: 45px;
       font-weight: normal;
 }
 
 #freeamountLabel{
      padding: 0;
 }
 
 .switch-field {
   padding: 15px 0 15px 0;
   margin: 5px 0 5px 0;
   overflow: hidden;
   width: 50%;
   display: inline;
 }
 
 #donation_frq{
   clear: right;
 }
 
 .switch-title {
   margin-bottom: 6px;
 }
 
 .switch-field input {
   display: none;
 }
 
 .switch-field label {
   float: left;
 }
 
 .switch-field label {
   display: inline-block;
   width: 60px;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
   text-shadow: none;
   padding: 3px 14px;
   border: none;
 }
 
 .switch-field input:checked + label {
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 
 .switch-field label:first-of-type {
   border-radius: 4px 0 0 4px;
   margin: 0 0 0 3px;
 }
 
 .switch-field label:last-of-type {
   border-radius: 0 4px 4px 0;
   margin: 0 11px 10px -1px;
 }
 
 .switches{
   width: 100%;
 }
+
+@media screen and (max-width: 800px){
+    #intro {
+        padding: 0px 20px 20px 20px;
+    }
+    
+    #main {
+        width: unset;
+        padding-right: 20px;
+    }
+    
+    .flex-container{
+        flex-direction: column;
+    }
+    
+    .column1, .column2, .column3 {
+        width: unset;
+        max-width: 90vw;
+    }
+    
+    #footer{
+        height: unset;
+    }
+    
+    #sitemap{
+    display: flex;
+    max-width: 90vw;
+    flex-wrap: wrap;
+    }
+}
diff --git a/web/template_header.m4 b/web/template_header.m4
index f7d50eba..038d9875 100644
--- a/web/template_header.m4
+++ b/web/template_header.m4
@@ -1,150 +1,151 @@
 m4_dnl                                                        -*-html-*-
 m4_dnl THIS IS INCLUDED BY `template.m4'
 m4_dnl DONT USE THIS FILE DIRECTLY
 m4_ifdef(`__TMPL_ROOT',,`m4_define(`__TMPL_ROOT',`')')
 
 m4_define(`__TITLE',m4_dnl
 I18N(`EN',`Secure E-Mail and File Encryption using GnuPG for Windows')`'m4_dnl
 I18N(`DE',`Sichere E-Mail- und Datei-Verschlüsselung mit GnuPG für Windows'))
 
 m4_ifdef(`__TMPL_PAGE_TITLE',,`m4_define(`__TMPL_PAGE_TITLE',`Gpg4win - 'TITLE)')
 
 m4_define(`LINK',
     `m4_ifelse($1, NO_LINK_FOR,
         `$2',
         `<a href="$1">$2</a>')')
 m4_define(`RQ',`m4_changequote(<,>)m4_dnl`
 'm4_changequote`'')m4_dnl trick for inserting right quotes from http://mbreen.com/m4.html#quotemacro
 
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
   <meta name="keywords" content="Gpg4win, GnuPG, GPA, GpgOL, E-Mail, Email, Windows, PGP, GPG, OpenPGP, S/MIME, Outlook, I18N(`EN', `Encryption, secure, security') I18N(`DE', `Verschlüsselung, sicher, Sicherheit')">
   <link rel="stylesheet" type="text/css" href="__TMPL_ROOT`'gpg4win.css">
   <link rel="shortcut icon" href="__TMPL_ROOT`'favicon.png" type="image/png" />
   <title>__TMPL_PAGE_TITLE</title>
  </head>
  <body>
  <a name="top"></a>
  <div class="wrapper">
  <div class="header">
   <div class="language_select">
    <img src="img/english.png"> LANG_LINK(`EN',`English', EN_FILE) |
    <img src="img/german.png"> LANG_LINK(`DE',`Deutsch', DE_FILE)
   </div>
  </div>
  m4_ifdef(`EN_FILE', `m4_define(`LANG_DE', `1')', `m4_define(`LANG_DE', `0')')
  <div id="menu">
   <ul>
    <li class="mlogo">
     m4_ifelse(LANG_DE, `1', `<a href="index-de.html" title="Startseite"></a>', `<a href="index.html" title="Home"></a>')
    </li>
    <li class="mwhatsnew">
     m4_ifelse(LANG_DE, `1', `<a href="version4-de.html" title="Was ist in Version 4 neu"><div>Was ist neu</br>Version 4</div></a>', `<a href="version4.html" title="What is new in version 4"><div>What`'RQ()s new</br>Version 4</div></a>')
    </li>
    <li class="mbetween">
     m4_ifelse(LANG_DE, `1', `<a href="index-de.html" title="Startseite"></a>', `<a href="index.html" title="Home"></a>')
    </li>
    MENU(`about', `Über Gpg4win', `About Gpg4win', `about', MAIN, LANG_DE)
     <ul>
      MENU(`about', `Über Gpg4win', `About Gpg4win', `about', SUB, LANG_DE)
      MENU(`features', `Funktionen', `Features', `features', SUB, LANG_DE)
      MENU(`system-requirements', `Systemvoraussetzungen', `System Requirements', `system-requirements', SUB, LANG_DE)
      MENU(`documentation', `Dokumentation', `Documentation', `documentation', SUB, LANG_DE)
      MENU(`screenshots', `Screenshots', `Screenshots', `screenshots', SUB, LANG_DE)
      MENU(`privacy-policy', `Datenschutzerklärung', `Privacy Policy', `privacy-policy', SUB, LANG_DE)
      <li class="subcap"></li>
     </ul>
    </li>
    MENU(`community', `Gemeinschaft', `Community', `community', MAIN, LANG_DE)
     <ul>
      MENU(`community', `Gemeinschaft', `Community', `community', SUB, LANG_DE)
      MENU(`contribute', `Zu Gpg4win beitragen', `Contribute to Gpg4win', `contribute', SUB, LANG_DE)
      <li class="subcap"></li>
     </ul>
    </li>
    MENU(`support', `Support', `Support', `support', MAIN, LANG_DE)
    </li>
    <li class="mdonate">
     m4_ifelse(LANG_DE, `1', `<a href="get-gpg4win-de.html">Download</a>', `<a href="get-gpg4win.html">Download</a>')
     </li>
   </ul>
  </div>
   m4_include(`header.m4')
   <div class="content">
    m4_divert(999)
   <br clear="all" />
   </div>
   </div>
 
   <div id="footer">
    <br>
    <div id="sitemap">
     <ul>
      <li><a href="index-de.html"></a></li>
      MENU(`download', `Alle Downloads', `All Downloads', `download', MAIN, LANG_DE)
      <li>
        <a href="https://twitter.com/gpg4win" target="_blank" title="Follow @gpg4win">
          <img src="img/twitter-icon.png" class="social-icon">
        </a>
 <!-- Our flattr account results in a 404. Needs to be fixed.
        <a href="https://flattr.com/thing/2053326/Gpg4win-Secure-email-and-file-encryption-with-GnuPG-for-Windows"
            target="_blank" title="Flattr this">
          <img src="img/flattr-icon.png" class="social-icon">
        </a>
 -->
        <a href="https://git.gnupg.org/cgi-bin/gitweb.cgi?p=gpg4win.git;a=summary" target="_blank" title="Gpg4win git repository">
          <img src="img/git-icon.png" class="social-icon">
        </a>
      </li>
     </ul>
 
     <ul>
      <li><b>
      m4_ifelse(LANG_DE, `1', `Über Gpg4win', `About Gpg4win')
      </b></li>
      MENU(`about', `Über Gpg4win', `About Gpg4win', `about', MAIN, LANG_DE)
      MENU(`features', `Funktionen', `Features', `features', MAIN, LANG_DE)
      MENU(`system-requirements', `System Voraussetzungen', `System Requirements', `system-requirements', SUB, LANG_DE)
      MENU(`documentation', `Dokumentation', `Documentation', `documentation', SUB, LANG_DE)
      MENU(`screenshots', `Screenshots', `Screenshots', `screenshots', MAIN, LANG_DE)
      MENU(`privacy-policy', `Datenschutzerklärung', `Privacy Policy', `privacy-policy', SUB, LANG_DE)
     </ul>
     <ul>
      <li><b>
      m4_ifelse(LANG_DE, `1', `Gemeinschaft', `Community')
      </b></li>
      MENU(`community', `Gemeinschaft', `Community', `community', SUB, LANG_DE)
      MENU(`contribute', `Zu Gpg4win beitragen', `Contribute to Gpg4win', `contribute', SUB, LANG_DE)
      MENU(`reporting-bugs', `- Probleme melden', `- Reporting Bugs', `reporting-bugs', SUB, LANG_DE)
      MENU(`build-installer', `- Bau von Gpg4win', `- Building of Gpg4win', `build-installer', SUB, LANG_DE)
      MENU(`website-maintenance', `- Website pflegen', `- Maintaining Website', `website-maintenance', SUB, LANG_DE)
      </li>
      m4_ifelse(LANG_DE, `1', `<li><a href="localize-gpg4win.html">- Gpg4win übersetzen</a></li>', `<li><a href="localize-gpg4win.html">- Translating Gpg4win</a></li>')
     </ul>
     <ul>
      <li><b>Support</b></li>
      MENU(`support', `Support', `Support', `support', MAIN, LANG_DE)
     </ul>
     <ul>
      <li><b>
      m4_ifelse(LANG_DE, `1', `Diverses', `Misc')
      </b></li>
      MENU(`donate', `Spenden', `Donate', `donate', SUB, LANG_DE)
      MENU(`license', `Lizenz', `License', `license', SUB, LANG_DE)
      m4_ifelse(LANG_DE, `1', `<li><a href="https://git.gnupg.org/cgi-bin/gitweb.cgi?p=gpg4win.git;a=summary">Quellcode</a></li>',
          `<li><a href="https://git.gnupg.org/cgi-bin/gitweb.cgi?p=gpg4win.git;a=summary">Source Code</a></li>')
      <li><a href="https://wiki.gnupg.org">Wiki</a></li>
      m4_ifelse(LANG_DE, `1', `<li><a href="https://dev.gnupg.org/">Entwicklungsplattform</a></li>',
          `<li><a href="https://dev.gnupg.org/">Development Platform</a></li>')
      m4_ifelse(LANG_DE, `1', `<li><a href="Kurzstudie-Nachhaltige-FS-Beispiel-Gpg4win.html">Kurzstudie Gpg4win</a></li>',
          `<li><a href="ShortStudy-Sustainable-FS-example-Gpg4win.html">Short Study Gpg4win</a></li>')
      MENU(`links', `Links', `Links', `links', SUB, LANG_DE)
      MENU(`contributors', `Mitwirkende', `Contributors', `contributors', SUB, LANG_DE)
      MENU(`impressum', `Impressum', `Legal Notice', `impressum', SUB, LANG_DE)
     </ul>
   </div>
   </div>
    </body>
 </html>
 m4_divert