refactor: plain language styling

src/app/plain-language/plain-language.component.scss

@@ -14,17 +14,10 @@ a.back-link {
   align-items: center;
 }
 
-h3, h4 {
+h1, h2 {
   margin-top: 2rem;
 }
 
-h3 {
-  font-weight: bold;
-  font-size: 1.75rem!important;
-}
-
-h4 {
-  color: $primary;
-  font-weight: bolder;
-  font-size: 1.5rem;
+h3, h4 {
+  margin-top: 1rem;
 }

src/locales/de-DE-du.json

@@ -152,29 +152,29 @@
         "steps": {
           "0": {
             "header": "Umfrage starten",
-            "content": "Gehe auf die Start-Seite vom Termin-Finder. \nGebe deinem Termin einen Namen. \nZum Beispiel: Betriebs-Ausflug. \nDann musst du der Daten-Schutz-Erklärung \nund den Nutzungs-Bedingungen zustimmen. \n\nDer Punkt <b>Umfrage erstellen</b> bekommt dann eine Farbe. \nKlicke auf den Punkt <b>Umfrage erstellen</b>. \nDann geht es weiter."
+            "content": "Gehe auf die Start-Seite vom Termin-Finder. \nGebe deinem Termin einen Namen. \nZum Beispiel: Betriebs-Ausflug. \nDann musst du der Daten-Schutz-Erklärung \nund den Nutzungs-Bedingungen zustimmen. \n\nDer Punkt <strong>Umfrage erstellen</strong> bekommt dann eine Farbe. \nKlicke auf den Punkt <strong>Umfrage erstellen</strong>. \nDann geht es weiter."
           },
           "1": {
             "header": "So geht es weiter",
-            "content": "Gebe deinen Vornamen und deinen Nachnamen ein. \nUnd den Titel für deinen Termin. \nDie anderen Felder musst du nicht ausfüllen. \nKlicke dann auf den Punkt <b>Weiter</b> zur Termin-Auswahl."
+            "content": "Gebe deinen Vornamen und deinen Nachnamen ein. \nUnd den Titel für deinen Termin. \nDie anderen Felder musst du nicht ausfüllen. \nKlicke dann auf den Punkt <strong>Weiter</strong> zur Termin-Auswahl."
           },
           "2": {
             "header": "Termin-Auswahl",
             "content": "Gebe ein, welche Möglichkeiten es für die Umfrage geben soll. \nZum Beispiel die Uhrzeiten, die Tage und das Datum."
           },
           "3": {
             "header": "Passwort eingeben",
-            "content": "Wenn du willst, kannst du ein Passwort für deine Umfrage eingeben. \nAlle Teilnehmerinnen und Teilnehmer \nmüssen dann erst das Passwort eingeben, \nbevor sie an deiner Umfrage teilnehmen können. \nWillst du ein Passwort für deine Umfrage eingeben? \nDann musst du das Kästchen auf der rechten Seite anklicken. \n\nHast du ein Passwort eingegeben? \nDann klicke auf den Punkt <b>Weiter</b>. \nWillst du kein Passwort eingeben? \nDann klicke einfach auf den Punkt <b>Weiter</b>, \nohne ein Passwort einzugeben."
+            "content": "Wenn du willst, kannst du ein Passwort für deine Umfrage eingeben. \nAlle Teilnehmerinnen und Teilnehmer \nmüssen dann erst das Passwort eingeben, \nbevor sie an deiner Umfrage teilnehmen können. \nWillst du ein Passwort für deine Umfrage eingeben? \nDann musst du das Kästchen auf der rechten Seite anklicken. \n\nHast du ein Passwort eingegeben? \nDann klicke auf den Punkt <strong>Weiter</strong>. \nWillst du kein Passwort eingeben? \nDann klicke einfach auf den Punkt <strong>Weiter</strong>, \nohne ein Passwort einzugeben."
           },
           "4": {
             "header": "Eingaben überprüfen und Umfrage starten",
-            "content": "Jetzt kannst du noch einmal überprüfen, \nwas du eingegeben hast. \nWillst du etwas verbessern? \nDann klicke auf den Punkt <b>Überarbeiten</b>. \n\nBist du fertig? \nDann klicke auf den Punkt <b>Umfrage starten</b>. \nDu bekommst 2 Links. \nMit dem einen Link kannst du Teilnehmerinnen und Teilnehmer \nzu deiner Umfrage einladen. \nMit dem anderen Link kannst du Dinge an der Umfrage ändern. \n\nWichtig: \nSpeichere die Links ab, \nbevor du die Internet-Seite verlässt. \nSonst gehen die Links verloren \nund du musst die Umfrage neu machen."
+            "content": "Jetzt kannst du noch einmal überprüfen, \nwas du eingegeben hast. \nWillst du etwas verbessern? \nDann klicke auf den Punkt <strong>Überarbeiten</strong>. \n\nBist du fertig? \nDann klicke auf den Punkt <strong>Umfrage starten</strong>. \nDu bekommst 2 Links. \nMit dem einen Link kannst du Teilnehmerinnen und Teilnehmer \nzu deiner Umfrage einladen. \nMit dem anderen Link kannst du Dinge an der Umfrage ändern. \n\nWichtig: \nSpeichere die Links ab, \nbevor du die Internet-Seite verlässt. \nSonst gehen die Links verloren \nund du musst die Umfrage neu machen."
           }
         }
       },
       "declarationOnAccessibility": {
         "header": "3. Informationen über die Erklärung zur Barriere-Freiheit",
-        "content": "Du findest die Erklärung zur Barriere-Freiheit \nunten am Seiten-Rand auf der Start-Seite. \nIn der Erklärung zur Barriere-Freiheit stehen alle Barrieren, \ndie es auf der Internet-Seite gibt. \nDort steht auch, warum es diese Barrieren gibt. \n\nBarrieren auf der Internet-Seite sind Dinge, \nwarum für manche Menschen eine Internet-Seite \nschwer zu bedienen ist. \nZum Beispiel, wenn die Schrift zu klein ist. \nOder wenn es Texte nicht in Leichter Sprache gibt. \n\nKlicke auf den Punkt <b>Barriere-Freiheit</b>. \nDann kannst du die Erklärung zur Barriere-Freiheit lesen. \nHast du Barrieren gefunden, \ndie nicht in der Erklärung zur Barriere-Freiheit stehen? \nDann kannst du diese Barrieren melden. \nNehme dafür Kontakt zu der Beschwerde-Stelle auf, \ndie in der Erklärung zur Barriere-Freiheit steht."
+        "content": "Du findest die Erklärung zur Barriere-Freiheit \nunten am Seiten-Rand auf der Start-Seite. \nIn der Erklärung zur Barriere-Freiheit stehen alle Barrieren, \ndie es auf der Internet-Seite gibt. \nDort steht auch, warum es diese Barrieren gibt. \n\nBarrieren auf der Internet-Seite sind Dinge, \nwarum für manche Menschen eine Internet-Seite \nschwer zu bedienen ist. \nZum Beispiel, wenn die Schrift zu klein ist. \nOder wenn es Texte nicht in Leichter Sprache gibt. \n\nKlicke auf den Punkt <strong>Barriere-Freiheit</strong>. \nDann kannst du die Erklärung zur Barriere-Freiheit lesen. \nHast du Barrieren gefunden, \ndie nicht in der Erklärung zur Barriere-Freiheit stehen? \nDann kannst du diese Barrieren melden. \nNehme dafür Kontakt zu der Beschwerde-Stelle auf, \ndie in der Erklärung zur Barriere-Freiheit steht."
       }
     },
     "signLanguage": {

src/locales/de-DE-sie.json

@@ -152,29 +152,29 @@
         "steps": {
           "0": {
             "header": "Umfrage starten",
-            "content": "Gehen Sie auf die Start-Seite vom Termin-Finder. \nGeben Sie Ihrem Termin einen Namen. \nZum Beispiel: Betriebs-Ausflug. \nDann müssen Sie der Daten-Schutz-Erklärung \nund den Nutzungs-Bedingungen zustimmen. \n\nDer Punkt <b>Umfrage erstellen</b> bekommt dann eine Farbe. \nKlicken Sie auf den Punkt <b>Umfrage erstellen</b>. \nDann geht es weiter."
+            "content": "Gehen Sie auf die Start-Seite vom Termin-Finder. \nGeben Sie Ihrem Termin einen Namen. \nZum Beispiel: Betriebs-Ausflug. \nDann müssen Sie der Daten-Schutz-Erklärung \nund den Nutzungs-Bedingungen zustimmen. \n\nDer Punkt <strong>Umfrage erstellen</strong> bekommt dann eine Farbe. \nKlicken Sie auf den Punkt <strong>Umfrage erstellen</strong>. \nDann geht es weiter."
           },
           "1": {
             "header": "So geht es weiter",
-            "content": "Geben Sie Ihren Vornamen und Ihren Nachnamen ein. \nUnd den Titel für Ihren Termin. \nDie anderen Felder müssen Sie nicht ausfüllen. \nKlicken Sie dann auf den Punkt <b>Weiter</b> zur Termin-Auswahl."
+            "content": "Geben Sie Ihren Vornamen und Ihren Nachnamen ein. \nUnd den Titel für Ihren Termin. \nDie anderen Felder müssen Sie nicht ausfüllen. \nKlicken Sie dann auf den Punkt <strong>Weiter</strong> zur Termin-Auswahl."
           },
           "2": {
             "header": "Termin-Auswahl",
             "content": "Geben Sie ein, welche Möglichkeiten es für die Umfrage geben soll. \nZum Beispiel die Uhrzeiten, die Tage und das Datum."
           },
           "3": {
             "header": "Passwort eingeben",
-            "content": "Wenn Sie wollen, können Sie ein Passwort für Ihre Umfrage eingeben. \nAlle Teilnehmerinnen und Teilnehmer \nmüssen dann erst das Passwort eingeben, \nbevor sie an Ihrer Umfrage teilnehmen können. \nWollen Sie ein Passwort für Ihre Umfrage eingeben? \nDann müssen Sie das Kästchen auf der rechten Seite anklicken. \n\nHaben Sie ein Passwort eingegeben? \nDann klicken Sie auf den Punkt <b>Weiter</b>. \nWollen Sie kein Passwort eingeben? \nDann klicken Sie einfach auf den Punkt <b>Weiter</b>, \nohne ein Passwort einzugeben."
+            "content": "Wenn Sie wollen, können Sie ein Passwort für Ihre Umfrage eingeben. \nAlle Teilnehmerinnen und Teilnehmer \nmüssen dann erst das Passwort eingeben, \nbevor sie an Ihrer Umfrage teilnehmen können. \nWollen Sie ein Passwort für Ihre Umfrage eingeben? \nDann müssen Sie das Kästchen auf der rechten Seite anklicken. \n\nHaben Sie ein Passwort eingegeben? \nDann klicken Sie auf den Punkt <strong>Weiter</strong>. \nWollen Sie kein Passwort eingeben? \nDann klicken Sie einfach auf den Punkt <strong>Weiter</strong>, \nohne ein Passwort einzugeben."
           },
           "4": {
             "header": "Eingaben überprüfen und Umfrage starten",
-            "content": "Jetzt können Sie noch einmal überprüfen, \nwas Sie eingegeben haben. \nWollen Sie etwas verbessern? \nDann klicken Sie auf den Punkt <b>Überarbeiten</b>. \n\nSind Sie fertig? \nDann klicken Sie auf den Punkt <b>Umfrage starten</b>. \nSie bekommen 2 Links. \nMit dem einen Link können Sie Teilnehmerinnen und Teilnehmer \nzu Ihrer Umfrage einladen. \nMit dem anderen Link können Sie Dinge an der Umfrage ändern. \n\nWichtig: \nSpeichern Sie die Links ab, \nbevor Sie die Internet-Seite verlassen. \nSonst gehen die Links verloren \nund Sie müssen die Umfrage neu machen."
+            "content": "Jetzt können Sie noch einmal überprüfen, \nwas Sie eingegeben haben. \nWollen Sie etwas verbessern? \nDann klicken Sie auf den Punkt <strong>Überarbeiten</strong>. \n\nSind Sie fertig? \nDann klicken Sie auf den Punkt <strong>Umfrage starten</strong>. \nSie bekommen 2 Links. \nMit dem einen Link können Sie Teilnehmerinnen und Teilnehmer \nzu Ihrer Umfrage einladen. \nMit dem anderen Link können Sie Dinge an der Umfrage ändern. \n\nWichtig: \nSpeichern Sie die Links ab, \nbevor Sie die Internet-Seite verlassen. \nSonst gehen die Links verloren \nund Sie müssen die Umfrage neu machen."
           }
         }
       },
       "declarationOnAccessibility": {
         "header": "3. Informationen über die Erklärung zur Barriere-Freiheit",
-        "content": "Sie finden die Erklärung zur Barriere-Freiheit \nunten am Seiten-Rand auf der Start-Seite. \nIn der Erklärung zur Barriere-Freiheit stehen alle Barrieren, \ndie es auf der Internet-Seite gibt. \nDort steht auch, warum es diese Barrieren gibt. \n\nBarrieren auf der Internet-Seite sind die Dinge, \nwarum für manche Menschen eine Internet-Seite \nschwer zu bedienen ist. \nZum Beispiel, wenn die Schrift zu klein ist. \nOder wenn es Texte nicht in Leichter Sprache gibt. \n\nKlicken Sie auf den Punkt <b>Barriere-Freiheit</b>. \nDann können Sie die Erklärung zur Barriere-Freiheit lesen. \nHaben Sie Barrieren gefunden, \ndie nicht in der Erklärung zur Barriere-Freiheit stehen? \nDann können Sie diese Barrieren melden. \nNehmen Sie dafür Kontakt zu der Beschwerde-Stelle auf, \ndie in der Erklärung zur Barriere-Freiheit steht."
+        "content": "Sie finden die Erklärung zur Barriere-Freiheit \nunten am Seiten-Rand auf der Start-Seite. \nIn der Erklärung zur Barriere-Freiheit stehen alle Barrieren, \ndie es auf der Internet-Seite gibt. \nDort steht auch, warum es diese Barrieren gibt. \n\nBarrieren auf der Internet-Seite sind die Dinge, \nwarum für manche Menschen eine Internet-Seite \nschwer zu bedienen ist. \nZum Beispiel, wenn die Schrift zu klein ist. \nOder wenn es Texte nicht in Leichter Sprache gibt. \n\nKlicken Sie auf den Punkt <strong>Barriere-Freiheit</strong>. \nDann können Sie die Erklärung zur Barriere-Freiheit lesen. \nHaben Sie Barrieren gefunden, \ndie nicht in der Erklärung zur Barriere-Freiheit stehen? \nDann können Sie diese Barrieren melden. \nNehmen Sie dafür Kontakt zu der Beschwerde-Stelle auf, \ndie in der Erklärung zur Barriere-Freiheit steht."
       }
     },
     "signLanguage": {

src/locales/en-EN.json

@@ -152,29 +152,29 @@
         "steps": {
           "0": {
             "header": "Start poll",
-            "content": "Go to the start page of the appointment-finder. \nGive your appointment a name. \nFor example: Company outing. \nThen you must agree to the privacy declaration \nand the terms of service.\n\nThe <b>Create poll</b> item is then given a color. \nClick on the <b>Create poll</b> item. \nThen we continue."
+            "content": "Go to the start page of the appointment-finder. \nGive your appointment a name. \nFor example: Company outing. \nThen you must agree to the privacy declaration \nand the terms of service.\n\nThe <strong>Create poll</strong> item is then given a color. \nClick on the <strong>Create poll</strong> item. \nThen we continue."
           },
           "1": {
             "header": "Here's what happens next",
-            "content": "Enter your first name and last name. \nAnd the title for your appointment. \nYou do not have to fill in the other fields. \nThen click on <b>Next</b> to select an appointment."
+            "content": "Enter your first name and last name. \nAnd the title for your appointment. \nYou do not have to fill in the other fields. \nThen click on <strong>Next</strong> to select an appointment."
           },
           "2": {
             "header": "Appointment selection",
             "content": "Enter the options for the poll. \nFor example, the times, the days and the date."
           },
           "3": {
             "header": "Set password",
-            "content": "If you want, you can enter a password for your poll. \nAll participants must then enter the password \nbefore they can take part in your poll. \nDo you want to enter a password for your poll? \nThen click on the box on the right-hand side. \n\nDid you enter a password? \nThen click on the item <b>Next</b>. \nDo you not want to enter a password? \nThen simply click on the <b>Next</b> item, \nwithout entering a password."
+            "content": "If you want, you can enter a password for your poll. \nAll participants must then enter the password \nbefore they can take part in your poll. \nDo you want to enter a password for your poll? \nThen click on the box on the right-hand side. \n\nDid you enter a password? \nThen click on the item <strong>Next</strong>. \nDo you not want to enter a password? \nThen simply click on the <strong>Next</strong> item, \nwithout entering a password."
           },
           "4": {
             "header": "Check inputs and start poll",
-            "content": "Now you can check again \nwhat you have entered. \nDo you want to improve something? \nThen click on the <b>Revise</b> item. \n\nAre you done? \nThen click on <b>Start poll</b>. \nYou will get 2 links. \nWith the first link you can invite participants to your poll. \nWith the other link you can change things in the poll. \n\nImportant: \nSave the links \nbefore you leave the website. \nOtherwise the links will be lost \nand you will have to redo the poll."
+            "content": "Now you can check again \nwhat you have entered. \nDo you want to improve something? \nThen click on the <strong>Revise</strong> item. \n\nAre you done? \nThen click on <strong>Start poll</strong>. \nYou will get 2 links. \nWith the first link you can invite participants to your poll. \nWith the other link you can change things in the poll. \n\nImportant: \nSave the links \nbefore you leave the website. \nOtherwise the links will be lost \nand you will have to redo the poll."
           }
         }
       },
       "declarationOnAccessibility": {
         "header": "3. Information about the declaration on accessibility",
-        "content": "You will find the declaration on accessibility \nat the bottom of the start page.\nThe declaration on accessibility lists all barriers \nthat exist on the website.\nIt also explains why these barriers exist.\n\nBarriers on the Internet site are the things \nwhy some people find an Internet site \ndifficult to use.\nFor example, if the font is too small.\nOr if texts are not available in plain language.\n\nClick on the item <b>Accessibility</b>.\nThen you can read the declaration on accessibility.\nHave you found barriers \nthat are not in the accessibility statement?\nThen you can report these barriers.\nTo do this, contact the complaints office \n listed in the declaration on accessibility."
+        "content": "You will find the declaration on accessibility \nat the bottom of the start page.\nThe declaration on accessibility lists all barriers \nthat exist on the website.\nIt also explains why these barriers exist.\n\nBarriers on the Internet site are the things \nwhy some people find an Internet site \ndifficult to use.\nFor example, if the font is too small.\nOr if texts are not available in plain language.\n\nClick on the item <strong>Accessibility</strong>.\nThen you can read the declaration on accessibility.\nHave you found barriers \nthat are not in the accessibility statement?\nThen you can report these barriers.\nTo do this, contact the complaints office \n listed in the declaration on accessibility."
       }
     },
     "signLanguage": {