Merge branch 'develop'

Author: tobihagemann

assets/css/custom.css

@@ -85,10 +85,6 @@
   @apply text-primary no-underline hover:underline;
 }
 
-.prose-article {
-  @apply prose prose-sm md:prose max-w-none md:max-w-none;
-}
-
 .font-h1 {
   @apply font-headline font-medium text-3xl md:text-4xl leading-tight;
 }
@@ -109,10 +105,18 @@
   @apply text-sm md:text-base leading-relaxed text-gray-700;
 }
 
+.label-uppercase {
+  @apply block font-bold text-xs uppercase tracking-wide text-gray-600;
+}
+
 .white-box {
   @apply rounded-sm shadow-sm bg-white;
 }
 
+.input-box {
+  @apply rounded-sm border-gray-300 focus:ring-0 focus:border-secondary;
+}
+
 .StripeElement {
   @apply rounded-sm border border-gray-300 px-3 py-2;
 }

content/_index.de.html

@@ -3,7 +3,7 @@
 ---
 
 <section class="container py-12">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <div class="flex flex-wrap">
       <div class="md:w-2/3">
         <h2>Nimm die Sicherung deiner Daten selbst in die Hand</h2>
@@ -31,7 +31,7 @@ <h2>Nimm die Sicherung deiner Daten selbst in die Hand</h2>
 </section>
 
 <section class="container py-12">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <div class="flex flex-wrap md:flex-row-reverse">
       <div class="md:w-2/3">
         <h2>Wie schützt Cryptomator deine Daten?</h2>
@@ -66,7 +66,7 @@ <h2>Wie schützt Cryptomator deine Daten?</h2>
 </section>
 
 <section class="container text-center py-12 md:py-16 lg:py-20">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2>Optimaler Schutz dank neuesten Technologie-Standards</h2>
     <figure class="mx-auto md:w-5/6 lg:w-2/3">
       <img data-src="/de/img/home/split-screenshots.avif" class="lazyload aspect-1664/975 w-full" alt="Gegenüberstellung von verschlüsselten und entschlüsselten Daten in einem Cryptomator-Tresor"/>
@@ -76,7 +76,7 @@ <h2>Optimaler Schutz dank neuesten Technologie-Standards</h2>
 </section>
 
 <section class="container py-12 md:py-16 lg:py-20">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2 class="text-center">Warum ist Cryptomator sicher und vertrauenswürdig?</h2>
     <div class="flex flex-wrap md:flex-row-reverse">
       <div class="md:w-2/3">

content/_index.en.html

@@ -3,7 +3,7 @@
 ---
 
 <section class="container py-12">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <div class="flex flex-wrap">
       <div class="md:w-2/3">
         <h2>Take the security of your data into your own hands</h2>
@@ -31,7 +31,7 @@ <h2>Take the security of your data into your own hands</h2>
 </section>
 
 <section class="container py-12">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <div class="flex flex-wrap md:flex-row-reverse">
       <div class="md:w-2/3">
         <h2>How does Cryptomator protect your data?</h2>
@@ -66,7 +66,7 @@ <h2>How does Cryptomator protect your data?</h2>
 </section>
 
 <section class="container text-center py-12 md:py-16 lg:py-20">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2>Optimal protection thanks to the latest technology standards</h2>
     <figure class="mx-auto md:w-5/6 lg:w-2/3">
       <img data-src="/img/home/split-screenshots.avif" class="lazyload aspect-1664/975 w-full" alt="Comparison of encrypted and decrypted data in a Cryptomator vault"/>
@@ -76,7 +76,7 @@ <h2>Optimal protection thanks to the latest technology standards</h2>
 </section>
 
 <section class="container py-12 md:py-16 lg:py-20">
-  <article class="prose-article">
+  <article class="prose prose-sm md:prose max-w-none md:max-w-none">
     <h2 class="text-center">Why is Cryptomator secure and trustworthy?</h2>
     <div class="flex flex-wrap md:flex-row-reverse">
       <div class="md:w-2/3">

content/boxcryptor-alternative.de.md

@@ -15,7 +15,7 @@ ogimage:
   height: 541
 ---
 
-<div class="prose-article">{{< markdownify >}}
+<div class="prose prose-sm md:prose max-w-none md:max-w-none">{{< markdownify >}}
 
 # Die beste Alternative, um deine sensiblen Daten in der Cloud zu verschlüsseln: Boxcryptor vs. Cryptomator
 
@@ -158,7 +158,7 @@ Kommen wir nun zum Vergleich der sichtbaren Funktionen. Die folgende Tabelle zei
   </tbody>
 </table>
 
-<div class="prose-article">{{< markdownify >}}
+<div class="prose prose-sm md:prose max-w-none md:max-w-none">{{< markdownify >}}
 
 ### Sicherheitsrelevante Features {#security-relevant-features}
 
@@ -195,9 +195,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFileContentEncryptionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Niemand kann unberechtigt den Dateiinhalt mitlesen.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Das ist die Grundvoraussetzung, um dein Recht auf Privatsphäre selbst in die Hand zu nehmen.</p>
       </td>
     </tr>
@@ -218,9 +218,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFileNameEncryptionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Niemand kann unberechtigt den Dateinamen erkennen.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Metadaten wie der Dateiname verraten mehr über dich, als du denkst. Aus Dateiendungen kann ein Profil über die von dir verwendeten Daten erstellt werden. Im schlimmsten Fall kann dich trotz Verschlüsselung des Dateiinhalts bereits der Name „Bericht Menschensrechtsverletzungen.docx“ am falschen Flughafen vor Probleme stellen.</p>
       </td>
     </tr>
@@ -241,9 +241,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFileAttributeEncryptionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Niemand erhält Zugriff auf zusätzliche Dateiattribute.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Manche Drittsoftwares speichern möglicherweise Metadaten über deine Datei in dessen Dateiattributen. Werden diese nicht verschlüsselt, kann diese jeder mitlesen und sogar manipulieren, um dein Betriebssystem zu bestimmten Verhaltensweisen zu zwingen.</p>
       </td>
     </tr>
@@ -259,9 +259,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isFOSSOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Der Quellcode ist einer breiten Community zugänglich, was die Sicherheit der Verschlüsselung erhöht.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Die Sicherheit eines Systems muss allein vom Schlüssel abhängen und darf nicht auf der Geheimhaltung der Algorithmen beruhen. Da der Verschlüsselungsalgorithmus von einer breiten Community kontrolliert und diskutiert wird, werden Schwachstellen oder Fehler im Code schnell erkannt.</p>
       </td>
     </tr>
@@ -277,9 +277,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isDirectoryObfuscationOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Die verschlüsselte Verzeichnisstruktur entspricht nicht der tatsächlichen bzw. unverschlüsselten Verzeichnisstruktur.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Manche Anwendungen erzeugen beim Speichern gleich mehrere Dateien, die in bestimmten Strukturen abgelegt werden. Falls diese Strukturen im verschlüsselten Zustand noch erkennbar ist, kann ein Angreifer trotz Verschlüsselung Rückschlüsse auf die Art der Daten ziehen.</p>
       </td>
     </tr>
@@ -295,9 +295,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isIntegrityProtectionOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Da Verschlüsselung nicht sofort auch vor Manipulation der Daten schützt, muss eine unbefugte Veränderung der Daten erkannt werden.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Um dich vor einer Vielzahl raffinierter Angriffe zu schützen, muss die Unversehrtheit deiner verschlüsselten Daten überprüft werden, bevor du sie entschlüsselst. Passiert dies nicht, ist es grundsätzlich denkbar, dass manipulierte Daten eingeschleust werden, die du dann unbemerkt öffnest. ({{< extlink "https://en.wikipedia.org/wiki/Chosen-ciphertext_attack" "Dies kann im schlimmsten Fall sogar von Angreifern genutzt werden, um die Verschlüsselung zu knacken." >}})</p>
       </td>
     </tr>
@@ -313,9 +313,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isQuantumResistantOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Die eingesetzten Verschlüsselungsalgorithmen sind auch dann noch sicher, wenn der Angreifer über Quantencomputer verfügt.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Manche Verschlüsselungsverfahren basieren auf mathematischen Problemen, die normalerweise schwer zu berechnen sind. Für Quantencomputer sind sie dagegen viel weniger komplex. Verfügt ein Angreifer über Zugang zu einem entsprechenden Quantencomputer, ist die Verschlüsselung deiner Daten de facto unwirksam.</p>
       </td>
     </tr>
@@ -331,9 +331,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isAuditedCryptographyOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Der Verschlüsselungscode wird von unabhängigen Gutachtern untersucht.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Audits mit Fokus auf kryptografisch relevanten Code können ein wichtiges Element zur Qualitätskontrolle sein, sofern der Auditor genug Zeit hat und nicht nur einen flüchtigen Überblick erhält.</p>
       </td>
     </tr>
@@ -349,9 +349,9 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isMemoryHardKDFOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Die Key Derivation Function (KDF) wird verwendet, um aus dem von dir eingegebenen Passwort den kryptografischen Schlüssel herzuleiten. Diese Funktion muss möglichst komplex sein, um Bruteforce-Angriffe (das wahllose Ausprobieren von Zeichenkombinationen) zu verhindern.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p class="mb-2">Um deinen Schlüssel aus deinem Passwort herzuleiten, braucht ein Computer 200ms. Das klingt kurz, addiert sich aber schnell zu astronomisch hohen Zeiten, wenn ein Angreifer alle denkbaren Passwörter durchprobieren muss. Angreifer könnten allerdings Spezialhardware (sog. ASICs) einsetzen, um hunderttausende Möglichkeiten gleichzeitig zu probieren.</p>
         <p>Um dem vorzubeugen, werden KDFs eingesetzt, die speicherintensiv („memory-hard“) sind, also besonders viel Speicher benötigen. Das  gestaltet einen Angriff unproportional aufwendig und somit unattraktiv für den Angreifer.</p>
       </td>
@@ -368,16 +368,16 @@ Lass uns jetzt einen Blick auf diese Merkmale werfen. Dafür vergleichen wir die
     </tr>
     <tr x-show="isShareKeysOpen" x-cloak>
       <td class="font-p p-4" colspan="3">
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Was bedeutet das?</p>
+        <p class="label-uppercase mb-2">Was bedeutet das?</p>
         <p class="mb-4">Ideal bei Team-Nutzung des Cloud-Speichers: Jedes Teammitglied kann ein individuelles Passwort verwenden – trotzdem habt ihr Zugriff auf die verschlüsselten Daten.</p>
-        <p class="block uppercase tracking-wide text-gray-600 text-xs font-bold mb-2">Warum ist das wichtig für die Datensicherheit?</p>
+        <p class="label-uppercase mb-2">Warum ist das wichtig für die Datensicherheit?</p>
         <p>Individuelle Passwörter in größeren Teams erhöhen die Sicherheit. Zum einen, weil die Weitergabe eines Passworts je nach Kommunikationskanal ein Risiko darstellt, zum anderen, weil Passwörter, die geteilt werden, oft schwächer (weil einfacher zu merken) sind.</p>
       </td>
     </tr>
   </tbody>
 </table>
 
-<div class="prose-article">{{< markdownify >}}
+<div class="prose prose-sm md:prose max-w-none md:max-w-none">{{< markdownify >}}
 
 ## Fazit: Wann Boxcryptor bzw. Cryptomator die passende Alternative für dich ist {#conclusion}