3 files changed, 156 insertions, 114 deletions
diff --git a/index.html b/index.html
index ec71d3a..e44568a 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,9 @@
    <script src="js/abmahn.js"></script>
  </head>
  <body>
-    <div id="wrapper" class="not-confirmed step1">
+    <div id="wrapper" class="not-confirmed step-1 stepdone-0">
      <div class="collapsable block-step1">
-        <div onclick="step0_done()" class="block-header">
+        <div onclick="head_1_click()" class="block-header">
          <h1 id="head1"><svg width="42px" height="42px">
 <path d="M21,1C9.954,1,1,9.954,1,21s8.954,20,20,20s20-8.954,20-20S32.046,1,21,1z M30.739,20.971c0-0.31-0.116-0.592-0.349-0.845
    c-0.233-0.251-0.524-0.378-0.874-0.378c-0.349,0-0.631,0.126-0.844,0.378c-0.214,0.253-0.339,0.535-0.378,0.845h-3.232
@@ -29,13 +29,13 @@
          <p>Sie haben eine Abmahnung für einen Urheberrechtsverstoß erhalten?</p>
          <p>Erzeugen Sie mit diesem Schriftsatz-Generator in fünf Schritten ein Antwortschreiben, das die abmahnende Kanzlei über die Unrechtmäßigkeit der Abmahnung in Kenntnis setzt.</p>
-          <div class="moreinfo">
+          <div class="block-moreinfo">
          <dl>
            <dt>Q: Welches Ziel verfolgt der Abmahnbeantworter?</dt>
            <dd>
              <p>A: Wir wollen mehr Menschen ermutigen, ihr Internet mit Nachbarn, Passanten und Netz-Bedürftigen zu teilen.</p>
-              <p>Momentan wird dies durch aggressiv auftretende Rechtewahrnehmer erschwert, die dem Inhaber des Anschlusses für vermeintlich über sein Netz begangene Urheberrechtsverstöße kostenpflichtig abmahnen. Dabei stehen so Abgemahnte einer für Unerfahrene komplexen Materie gegenüber, die laut Abmahnschreiben mit empfindlicher finanzieller Belastung (Androhung?) einhergeht.</p>
+              <p>Momentan wird dies durch aggressiv auftretende Rechtewahrnehmer erschwert, die dem Inhaber des Anschlusses für vermeintlich über sein Netz begangene Urheberrechtsverstöße kostenpflichtig abmahnen. Dabei stehen so Abgemahnte einer für Unerfahrene komplexen Materie gegenüber, die laut Abmahnschreiben mit empfindlichen finanziellen Folgen einhergeht.</p>
-              <p>Der Abmahnbeantworter soll unberechtigt Abgemahnte dabei unterstützen, sich schnell, präzise und zuerst kostenfrei vorerst ohne Kosten für einen eigenen Anwalt gegen die Abmahnung wehren zu können.</p>
+              <p>Der Abmahnbeantworter soll unberechtigt Abgemahnte dabei unterstützen, sich schnell, präzise und zuerst ohne Kosten für einen eigenen Anwalt gegen die Abmahnung wehren zu können.</p>
              <p>Zudem versuchen wir, einer groben Ungerechtigkeit im Abmahnwesen entgegenzuwirken, indem wir das Kostenrisiko für unberechtigte Abmahnungen wieder dem Abmahner überlassen.</p>
            </dd>
            <dt>Q: Wann ist denn eine Abmahnung unberechtigt?</dt>
@@ -48,7 +48,7 @@
            </dd>
            <dt>Q: Wieso? Muss nicht bei Rechtsstreitigkeiten die unterlegene Seite bezahlen?</dt>
            <dd>
-              <p>A: In einem ordentlichen Gerichtsverfahren ist dies tatsächlich der Fall. Bei einer Abmahnung ist das anders, da diese im Urheberrecht als Werkzeug ursprünglich für eine vorgerichtliche Klärung von Streitigkeiten zwischen Firmen gedacht war. Eine Rechtsaat der Otto-Normal-Anschlussinhaber keine eigene Rechtsabteilung und muss sich einen Anwalt nehmen.</p>
+              <p>A: In einem ordentlichen Gerichtsverfahren ist dies tatsächlich der Fall. Bei einer Abmahnung ist das anders, da diese im Urheberrecht als Werkzeug ursprünglich für eine vorgerichtliche Klärung von Streitigkeiten zwischen Firmen gedacht war. Eine Rechtsabteilung schickt einer anderen den Hinweis, das Problem wird gelöst und man muss kein Gericht damit beschäftigen. Leider hat der Otto-Normal-Anschlussinhaber keine eigene Rechtsabteilung und muss sich einen Anwalt nehmen.</p>
            </dd>
            <dt>Q: Heißt das, ich muss das ganze Verfahren ohne Anwalt durchfechten?</dt>
            <dd>
@@ -69,7 +69,7 @@
            <dt>Q: Was passiert mit meinen Daten, die ich in den Abmahnbeantworter eingebe?</dt>
            <dd>
              <p>A: Wir senden keinerlei Informationen an unseren Web-Server und können daher auch mit den Daten keinen Unfug treiben. Die Daten verlassen die Abmahnbeantworter-Seite einzig als fertiges PDF. Dieses wird mittels Javascript von Ihrem Web-Browser selbst erzeugt.</p>
-              <p>(In einer zukünftigen Version bieten wir an, auf Wunsch im Seiten-spezifischen sogenanten 'localStorage' des Browser die Details der Abmahnung für spätere Schreiben oder Klagen zu hinterlegen)</p>
+              <p>(In einer zukünftigen Version bieten wir an, auf Wunsch im Seiten-spezifischen sogenanten <a href="https://de.wikipedia.org/wiki/Web_Storage">localStorage</a> des Browser die Details der Abmahnung für spätere Schreiben oder Klagen zu hinterlegen)</p>
            </dd>
            <dt>Q: Soll ich eine Unterlassungserklärung unterschreiben?</dt>
            <dd>
@@ -79,14 +79,14 @@
          </div>
          <p><strong>Sie sind sicher, diese angebliche Urheberrechtsverletzung nicht begangen zu haben?</strong></p>
          <div class="two-buttons">
-            <div class="button button-green" onclick="step1_done()">Ja, ich bin sicher.</div>
+            <div class="button button-green" onclick="step_1_done()">Ja, ich bin sicher.</div>
-            <div class="button button-red" onclick="step0_cancel()">Nein, bin unsicher.</div>
+            <div class="button button-red" onclick="step_0_cancel()">Nein, bin unsicher.</div>
          </div>
        <div class="hint show-moreinfo" onclick="show_moreinfo()">Sie möchten mehr darüber erfahren?</div>
-        <div class="hint show-lessinfo" onclick="show_lessinfo()">Sie haben genug darüber erfahren?</div>
+        <div class="hint hide-moreinfo" onclick="hide_moreinfo()">Sie haben genug darüber erfahren?</div>
        </div>
      </div>
-      <div class="collapsable block-stepcancel" id="unsicher">
+      <div class="collapsable block-step0" id="unsicher">
        <div class="juice">
          <p>Bitte benutzen Sie diesen Vordruck nur, wenn Sie tatsächlich nicht für die abgemahnte Verletzung verantwortlich sind. Sollte dies doch der Fall sein, oder wenn Sie sich <b>nicht</b> sicher sind, dann suchen Sie bitte einen Anwalt auf.</p>
          <p>Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Dadurch können erhebliche Kosten entstehen.</p>
@@ -98,7 +98,7 @@
        </div>
      </div>
      <div class="collapsable block-step2">
-        <div onclick="step1_done()" class="block-header">
+        <div onclick="head_2_click()" class="block-header">
          <h2 id="head2"><div class="circle_num undone">1</div><div class="circle_num done">✓</div> Wer mahnt ab?</h2>
        </div>
        <div class="juice">
@@ -123,12 +123,12 @@
            <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li>
          </ul>
          <div class="one-button">
-            <div class="button button-green" onclick="step2_done()">Weiter</div>
+            <div class="button button-green" onclick="step_2_done()">Weiter</div>
          </div>
        </div>
      </div>
      <div class="collapsable block-step3">
-        <div onclick="step2_done()" class="block-header">
+        <div onclick="head_3_click()" class="block-header">
          <h2 id="head3"><div class="circle_num undone">2</div><div class="circle_num done">✓</div> Wie lautet das Aktenzeichen?</h2>
        </div>
        <div class="juice">
@@ -206,12 +206,12 @@
          <p class="hint">Hinweis: Die vom Abmahner angegebenen Fristen sind meist zu knapp und können ruhig ignoriert werden. Jedoch sollte Ihre Antwort nicht grundlos mehr als 14 Tage nach Eingang der Abmahnung erfolgen.</p>
          <div class="one-button">
-            <div class="button button-green" onclick="step3_done()">Weiter</div>
+            <div class="button button-green" onclick="step_3_done()">Weiter</div>
          </div>
        </div>
      </div>
      <div class="collapsable block-step4">
-        <div onclick="step3_done()" class="block-header">
+        <div onclick="head_4_click()" class="block-header">
          <h2 id="head4"><div class="circle_num undone">3</div><div class="circle_num done">✓</div> Warum sind Sie nicht Täter?</h2>
        </div>
        <div class="juice">
@@ -227,12 +227,12 @@
          <div><input id="alibi_keinendgeraet" type="checkbox"/><label for="alibi_keinendgeraet"><span></span>Ich besitze keinen internetfähigen Computer.</label></div>
          <div><input id="alibi_nichtwohnhaft" type="checkbox"/><label for="alibi_nichtwohnhaft"><span></span>Zum angegebenen Zeitpunkt habe ich an der ermittelten Adresse nicht (mehr) gewohnt.</label></div>
          <div class="one-button">
-            <div class="button button-green" onclick="step4_done()">Weiter</div>
+            <div class="button button-green" onclick="step_4_done()">Weiter</div>
          </div>
        </div>
      </div>
      <div class="collapsable block-step5">
-        <div onclick="step4_done()" class="block-header">
+        <div onclick="head_5_click()" class="block-header">
          <h2 id="head5"><div class="circle_num undone">4</div><div class="circle_num done">✓</div> Warum sind Sie kein Störer?</h2>
        </div>
        <div class="juice">
@@ -247,12 +247,12 @@
          <p></p>
          <div class="hint">Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.</div>
          <div class="one-button">
-            <div class="button button-green" onclick="step5_done()">Weiter</div>
+            <div class="button button-green" onclick="step_5_done()">Weiter</div>
          </div>
        </div>
      </div>
      <div class="collapsable block-step6">
-        <div onclick="step5_done()" class="block-header">
+        <div onclick="head_6_click()" class="block-header">
          <h2 id="head6"><div class="circle_num undone">5</div><div class="circle_num done">✓</div> Wer wird abgemahnt?</h2>
        </div>
        <div class="juice">
@@ -270,12 +270,12 @@
            <p>Datenschutzhinweis: Wir übertragen Ihre Daten nicht ins Internet. Das Antwortschreiben wird auf Ihrem Computer erstellt.</p>
          </div>
          <div class="one-button">
-            <div class="button button-green" onclick="step6_done()">Weiter</div>
+            <div class="button button-green" onclick="step_6_done()">Weiter</div>
          </div>
        </div>
      </div>
      <div class="collapsable block-step7">
-        <div onclick="step6_done()" class="block-header">
+        <div onclick="head_7_click()" class="block-header">
          <h2 id="head7"><div class="circle_num">&#x2713;</div>Fertig!</h2>
        </div>
        <div class="juice">
@@ -293,7 +293,7 @@
    </div>
    <div id="footer" class="footer">
      <div class="scrollcontainer">
-        <div class="credits">
+        <div class="block-credits">
          <div class="partners">
            <a href="https://www.ccc.de/"><div id="ccc" class="partner">
              <img src="img/ccc.svg" height="50px" alt="Logo des Chaos Computer Clubs"/>
@@ -308,12 +308,12 @@
              <div>Gesellschaft für Freiheitsrechte</div>
            </div></a>
          </div>
-          <div class="credit imprint" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div>
+          <div class="credit show-impressum" onclick="show_impressum()"><span>Impressum + Datenschutz<span></div>
          <div class="credit implementor"><a href="https://erdgeist.org/">erdgeist</a> (Konzept + Umsetzung)</div>
          <div class="credit implementor"><a href="https://kanzlei-hubrig.de/">Beata Hubrig</a> (Rechtliches)</div>
          <div class="credit implementor"><a href="http://www.schlicht-und-ergreifend.de">Malik Aziz</a> (Design) ∙ <a href="http://elektrowecker.de/">Pepo</a> (UX)</div>
        </div>
-        <div class="impressum">
+        <div class="block-impressum">
          <div class="partners">
            <p>Der Abmahnbeantworter ist ein Projekt des Chaos Computer Club e. V., des Fördervereins Freie Netzwerke e. V. und der Gesellschaft für Freiheitsrechte e. V.</p>
            <div class="back circle_num" onclick="hide_impressum()">⇦</div><!--
diff --git a/js/abmahn.js b/js/abmahn.js
index 6b6e39c..46f18e6 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -15,6 +15,21 @@ function setClass(id, classes) {
  document.getElementById(id).className = classes;
 }
+function hasClass(id, classes) {
+  return (" " + document.getElementById(id).className + " ").replace(/[\n\t]/g, " ").indexOf(" " + classes + " ") > -1;
+}
+function addClass(id, classes) {
+  if (hasClass(id, classes)) { return; }
+  document.getElementById(id).className += ' ' + classes;
+}
+function setExclusiveClass(id,value,clearpattern) {
+  var reg = new RegExp('(\\s|^)' + clearpattern + '-[^\\s]+(\\s|$)');
+  var elem = document.getElementById(id);
+  elem.className = elem.className.replace(reg, ' ') + ' ' + clearpattern + '-' + value;
+}
 function setSelection(id, selection) {
  document.getElementById(id).value = selection;
 }
@@ -56,21 +71,64 @@ function scrollTo(end) {
    step();
 }
-function step0_cancel() { scrollTo(0); setClass('wrapper', 'not-confirmed stepcancel'); }
+/* Handle all visual transitions first */
-function step0_done()   { scrollTo(0); setClass('wrapper', 'step1'); }
+function hide_impressum() { setExclusiveClass('footer', 'hidden', 'impressum'); }
-function step1_done()   { scrollTo(0); setClass('wrapper', 'step2'); }
+function show_impressum() { setExclusiveClass('footer', 'shown', 'impressum'); }
-function step2_done()   { scrollTo(103); setClass('wrapper', 'step3'); }
-function step3_done()   { scrollTo(196); setClass('wrapper', 'step4'); }
+function show_moreinfo() {              setExclusiveClass('wrapper', 'shown', 'moreinfo'); }
-function step4_done()   { scrollTo(289); setClass('wrapper', 'step5'); }
+function hide_moreinfo() { scrollTo(0); setExclusiveClass('wrapper', 'hidden', 'moreinfo'); }
-function step5_done()   { scrollTo(382); setClass('wrapper', 'step6'); }
-function step6_done()   { scrollTo(475); setClass('wrapper', 'step7'); }
+function head_n_click(step, scroll_val) {
+  if(!hasClass('wrapper', 'stepdone-' + (step - 1).toString() )) { return; }
+  scrollTo(scroll_val);
+  setExclusiveClass('wrapper', step.toString(), 'step');
+  setExclusiveClass('wrapper', 'hidden', 'moreinfo');
+}
+function head_1_click() { head_n_click(1, 0); }
+function head_2_click() { head_n_click(2, 0); }
+function head_3_click() { head_n_click(3, 103); }
+function head_4_click() { head_n_click(4, 196); }
+function head_5_click() { head_n_click(5, 289); }
+function head_6_click() { head_n_click(6, 382); }
+function head_7_click() { head_n_click(7, 475); }
+/* Handle functional step transitions now */
+function step_0_cancel() { scrollTo(0);   setClass('wrapper', 'not-confirmed step-0'); }
+function step_1_done() {
+  addClass('wrapper', 'stepdone-1');
+  head_2_click();
+}
+function step_2_done() {
+  addClass('wrapper', 'stepdone-2');
+  head_3_click();
+}
+function step_3_done() {
+  addClass('wrapper', 'stepdone-3');
+  head_4_click();
+}
+function step_4_done() {
+  addClass('wrapper', 'stepdone-4');
+  head_5_click();
+}
+function step_5_done() {
+  addClass('wrapper', 'stepdone-5');
+  head_6_click();
+}
+function step_6_done() {
+  addClass('wrapper', 'stepdone-6');
+  head_7_click();
+}
-function hide_impressum() { setClass('footer', 'footer'); }
-function show_impressum() { setClass('footer', 'footer show-imprint'); }
-function show_moreinfo() { setClass('step1hook', 'juice moreinfoshown'); }
-function show_lessinfo() { scrollTo(0); setClass('step1hook', 'juice'); }
+/* Handle presets for known kanzleien */
 function waldorf() {
  setText('abmahnender_kanzlei', 'Waldorf & Frommer RAe');
  setText('abmahnender_bearbeiter', '');
diff --git a/style.css b/style.css
index 1aa7a87..fa11114 100644
--- a/style.css
+++ b/style.css
@@ -85,7 +85,7 @@ h1 svg {
  transition: transform 0.5s;
 }
-#wrapper.step1 h1 svg {
+#wrapper.step-1 h1 svg {
  transform: scale(1.35) translate(0px, 4px) rotate(360deg);
 }
@@ -227,7 +227,7 @@ label:first-line {
 /* Global element definitions done.
   Now for basic color scheme */
 #unsicher    { background-color: #840020; }
-.footer      { background-color: #F1F2E3; }
+#footer      { background-color: #F1F2E3; }
 .block-step1 { background-color: #F1F2E3; }
 .block-step2 { background-color: #047E7C; }
 .block-step3 { background-color: #0C6D74; }
@@ -254,7 +254,7 @@ label:first-line {
  background-color: black;
 }
-.footer {
+#footer {
  color: #8E99A0;
 }
@@ -266,7 +266,7 @@ label:first-line {
 }
 /* Footer shadow is inverted an marks end of stacked cards */
-.footer {
+#footer {
  box-shadow: inset 0px 12px 6px -6px rgba(0, 0, 0, 0.5);
 }
@@ -325,9 +325,9 @@ dd {
   global state (as set with a class on the wrapper element)
 */
 .juice,
+.block-moreinfo,
 #unsicher,
-.moreinfo,
+#wrapper.step-0 h2 {
-#wrapper.stepcancel h2 {
  overflow: hidden;
  max-height: 0px;
  transition: max-height, height;
@@ -336,46 +336,50 @@ dd {
  transition-delay: 0s;
 }
-.show-lessinfo,
+.hide-moreinfo,
 .show-moreinfo {
  display: inline-block;
  border-bottom: dotted 1px rgba(0,0,0,0.25);
-  margin-bottom: 1em;;
+  margin-bottom: 1em;
  cursor: pointer;
 }
-.show-lessinfo { display: none; }
+.hide-moreinfo { display: none; }
-#step1hook.moreinfoshown .show-lessinfo { display: inline-block; }
+#wrapper.moreinfo-shown .hide-moreinfo { display: inline-block; }
-#step1hook.moreinfoshown .show-moreinfo { display: none; }
+#wrapper.moreinfo-shown .show-moreinfo { display: none; }
 /* These are the heights of the expanded sections, only shown if the
   wrapper has the appropriate class */
-#wrapper.step1 .block-step1 .juice { max-height: 450px; }
+#wrapper.step-1 .block-step1 .juice { max-height: 450px; }
-#wrapper.step2 .block-step2 .juice { max-height: 950px; }
+#wrapper.step-2 .block-step2 .juice { max-height: 950px; }
-#wrapper.step3 .block-step3 .juice { max-height: 950px; }
+#wrapper.step-3 .block-step3 .juice { max-height: 950px; }
-#wrapper.step4 .block-step4 .juice { max-height: 1050px; }
+#wrapper.step-4 .block-step4 .juice { max-height: 1050px; }
-#wrapper.step5 .block-step5 .juice { max-height: 1200px; }
+#wrapper.step-5 .block-step5 .juice { max-height: 1200px; }
-#wrapper.step6 .block-step6 .juice { max-height: 850px; }
+#wrapper.step-6 .block-step6 .juice { max-height: 850px; }
-#wrapper.step7 .block-step7 .juice { max-height: 650px; }
+#wrapper.step-7 .block-step7 .juice { max-height: 650px; }
-#step1hook.moreinfoshown .moreinfo { max-height: 3500px; }
+#wrapper.moreinfo-shown .block-moreinfo   { max-height: 3500px; }
-#wrapper.step1 .block-step1 #step1hook.moreinfoshown.juice    { max-height: 3800px;}
+#wrapper.step-1.moreinfo-shown .block-step1 .juice { max-height: 3800px;}
 /* The unsicher section does not have a headline initially visible,
   so the sections padding must be hidden and everything must be unhidden together */
 #unsicher {
  padding: 0;
 }
-#wrapper.stepcancel .block-stepcancel .juice,
+#wrapper.step-0 .block-step0 .juice,
-#wrapper.stepcancel #unsicher {
+#wrapper.step-0 #unsicher {
  max-height: 450px;
 }
 /* If the user did not yet confirm that he's sure, disallow expanding blocks */
-#wrapper.not-confirmed .block-header {
+.block-header { pointer-events: none; }
-  pointer-events: none;
+#wrapper.stepdone-0 #head1 { pointer-events: auto; }
-}
+#wrapper.stepdone-1 #head2 { pointer-events: auto; }
+#wrapper.stepdone-2 #head3 { pointer-events: auto; }
+#wrapper.stepdone-3 #head4 { pointer-events: auto; }
+#wrapper.stepdone-4 #head5 { pointer-events: auto; }
+#wrapper.stepdone-5 #head6 { pointer-events: auto; }
+#wrapper.stepdone-6 #head7 { pointer-events: auto; }
 /* Our navigational buttons have a consistent height defined by its wrapper box */
 .two-buttons,
@@ -448,26 +452,6 @@ dd {
 /* Style things that depend on the progress.
   Example: circles turn squares when a step is finished */
-#wrapper.step3 .block-step2 .circle_num.undone,
-#wrapper.step4 .block-step2 .circle_num.undone,
-#wrapper.step5 .block-step2 .circle_num.undone,
-#wrapper.step6 .block-step2 .circle_num.undone,
-#wrapper.step7 .block-step2 .circle_num.undone,
-#wrapper.step4 .block-step3 .circle_num.undone,
-#wrapper.step5 .block-step3 .circle_num.undone,
-#wrapper.step6 .block-step3 .circle_num.undone,
-#wrapper.step7 .block-step3 .circle_num.undone,
-#wrapper.step5 .block-step4 .circle_num.undone,
-#wrapper.step6 .block-step4 .circle_num.undone,
-#wrapper.step7 .block-step4 .circle_num.undone,
-#wrapper.step6 .block-step5 .circle_num.undone,
-#wrapper.step7 .block-step5 .circle_num.undone,
-#wrapper.step7 .block-step6 .circle_num.undone {
-  transform: rotate3d(45, 45, 1, 90deg);
-  transition: transform 0.5s, visibility 0.5s;
-  visibility: hidden;
-}
 .circle_num.done {
  position: relative;
  margin-right: -68px;
@@ -479,21 +463,21 @@ dd {
  color: white;
 }
-#wrapper.step3 .block-step2 .circle_num.done,
+#wrapper.stepdone-2 .block-step2 .circle_num.undone,
-#wrapper.step4 .block-step2 .circle_num.done,
+#wrapper.stepdone-3 .block-step3 .circle_num.undone,
-#wrapper.step5 .block-step2 .circle_num.done,
+#wrapper.stepdone-4 .block-step4 .circle_num.undone,
-#wrapper.step6 .block-step2 .circle_num.done,
+#wrapper.stepdone-5 .block-step5 .circle_num.undone,
-#wrapper.step7 .block-step2 .circle_num.done,
+#wrapper.stepdone-6 .block-step6 .circle_num.undone {
-#wrapper.step4 .block-step3 .circle_num.done,
+  transform: rotate3d(45, 45, 1, 90deg);
-#wrapper.step5 .block-step3 .circle_num.done,
+  transition: transform 0.5s, visibility 0.5s;
-#wrapper.step6 .block-step3 .circle_num.done,
+  visibility: hidden;
-#wrapper.step7 .block-step3 .circle_num.done,
+}
-#wrapper.step5 .block-step4 .circle_num.done,
-#wrapper.step6 .block-step4 .circle_num.done,
+#wrapper.stepdone-2 .block-step2 .circle_num.done,
-#wrapper.step7 .block-step4 .circle_num.done,
+#wrapper.stepdone-3 .block-step3 .circle_num.done,
-#wrapper.step6 .block-step5 .circle_num.done,
+#wrapper.stepdone-4 .block-step4 .circle_num.done,
-#wrapper.step7 .block-step5 .circle_num.done,
+#wrapper.stepdone-5 .block-step5 .circle_num.done,
-#wrapper.step7 .block-step6 .circle_num.done {
+#wrapper.stepdone-6 .block-step6 .circle_num.done {
  visibility: visible;
  transform: rotate3d(0,0,0,0deg);
  transition: transform 0.5s 0.5s, visibility 0.5s 0.5s;
@@ -528,11 +512,11 @@ select.zeit {
  margin: 0 auto -300px;
 }
-.footer, .push {
+#footer, .push {
  height: 300px;
 }
-.footer {
+#footer {
  width: 100%;
  min-width: 540px;
  margin: 0;
@@ -546,20 +530,20 @@ select.zeit {
 }
 /* Footer links have a softer color than in block 1 */
-.footer a:link,
+#footer a:link,
-.footer a:visited {
+#footer a:visited {
  color: #8E99A0;
 }
-.footer .partner a:link,
+#footer .partner a:link,
-.footer .implementor a:link,
+#footer .implementor a:link,
-.footer .partner a:visited,
+#footer .partner a:visited,
-.footer .implementor a:visited,
+#footer .implementor a:visited,
-.footer .imprint span {
+#footer .show-impressum span {
  border-bottom: dotted 1px rgba(0,0,0,0.25);
 }
-.footer .imprint {
+#footer .show-impressum {
  cursor: pointer;
  margin-bottom: 1em;
 }
@@ -587,7 +571,7 @@ select.zeit {
  transition: transform 1s;
 }
-.footer.show-imprint .partner > img {
+#footer.impressum-shown .partner > img {
  transform: rotate(720deg);
 }
@@ -606,7 +590,7 @@ select.zeit {
  width: 200%;
 }
-.impressum {
+.block-impressum {
  float: right;
  width: 50%;
  height: 260px;
@@ -616,16 +600,16 @@ select.zeit {
  left: 0%;
 }
-.impressum p {
+.block-impressum p {
  margin: 0 0 .1em 0;
 }
-.footer.show-imprint .impressum {
+#footer.impressum-shown .block-impressum {
  left: -50%;
  top: 0;
 }
-.credits {
+.block-credits {
  width: 50%;
  float: left;
  position: relative;
@@ -633,7 +617,7 @@ select.zeit {
  transition: left 1s;
 }
-.footer.show-imprint .credits {
+#footer.impressum-shown .block-credits {
  left: -50%;
 }