autotopia: Replace .header with <h1>

content/autotopia/index.xml

@@ -3,7 +3,7 @@
 
 <page pagetitle="Start" title="Autotopia">
   <div class="a-item">
-    <span class="header">call for participation</span>
+    <h1>call for participation</h1>
     <p lang="en"> Beginning with the industrial revolution, and the massive impact it had far into the 20th century, we can see again and again how advances in automation provoke social upheaval. By means of technological progress, fueled by a globally connected economy, disruptive technologies impact our lives and communities more and more frequently.
     </p>
     <p lang="de-DE">
@@ -45,7 +45,6 @@
       Autotopia soll eine möglichst große Bandbreite dieser Fragen, aus unterschiedlichen Perspektiven diskutierbar und erfahrbar machen.
     </p>
     <p lang="en"> 
-      At the moment we are looking for speakers and are going to lay down precise dates and formats. 
       We are planning to do talks, workshops, readings, film screenings and discussions. Is there someone you know, who we should absolutely ask?
     </p>
     <p lang="de-DE">
@@ -53,11 +52,11 @@
     </p>
   </div>
   <div class="a-item" lang="en">
-    <span class="header">news</span>
+    <h1>news</h1>
     <news-list prefix="autotopia-en" details="all"/>
   </div>
   <div class="a-item" lang="de-DE">
-    <span class="header">neuigkeiten</span>
+    <h1>neuigkeiten</h1>
     <news-list prefix="autotopia-de" details="all"/>
   </div>
 </page>

content/static/autotopia/autotopia.css

@@ -13,15 +13,6 @@ body {
     background: repeat url('autotopia_background_ornament.svg');
     background-size: 50%;
 }
-.wrapper {
-/*    margin: 0.5em auto;*/
-/*    max-width: 560px;*/
-/*    min-height: 800px;*/
-/*    background: left top no-repeat url('autotopia_vertical_header.svg');*/
-/*    /* make a "containing block" */
-/*    background-size: 50%;*/
-/*    position: relative;*/
-}
 
 article {
     display: flex;
@@ -37,6 +28,14 @@ h1 {
   /* don"t justify */
   text-align: left;
   font-size: inherit;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.a-item > h1{
+  margin-top: .5em;
+  margin-bottom: .5em;
+  display: inline-block;
 }
 
 .vertical-header{
@@ -80,12 +79,7 @@ h1 {
     text-align: justify;
     background-color: rgba(240,240,250,0.2);
 }
-.a-item > .header{
-  margin-top: .5em;
-  margin-bottom: .5em;
-  font-weight: bold;
-  display: inline-block;
-}
+
 .a-event-start {
   margin-right: 2em;
 }

xsl/autotopia/xhtml5.xsl

@@ -60,8 +60,8 @@
             <input type="radio" id="lang-en" name="langselect"/>
             <div class="a-content vertical-header">
               <div class="a-item">
-                <label lang="en"    for="lang-de" class="header">Auf deutsch anzeigen</label>
-                <label lang="de-DE" for="lang-en" class="header">Switch to english</label>
+                <label lang="en"    for="lang-de"><h1>Auf deutsch anzeigen</h1></label>
+                <label lang="de-DE" for="lang-en"><h1>Switch to english</h1></label>
               </div>
               <a href="{$baseurl}index.html">
                 <img title="Autotopia, Vertical Header" alt="Autotopia, Vertical Header" class="vertical-header-image" src="{$baseurl}autotopia_header_vertical.svg"/>
@@ -72,7 +72,7 @@
             </div>
             <div class="a-panel a-content">
               <div class="a-item">
-                <span class="header">meta</span>
+                <h1>meta</h1>
                 <p>
                   <a href="https://wiki.c3d2.de/GesellschaftMachtTechnik">wiki</a>
                   |
@@ -96,8 +96,8 @@
                 </p>
               </div>
               <div class="a-item">
-                <span lang="en" class="header">events</span>
-                <span lang="de-DE" class="header">veranstaltungen</span>
+                <h1 lang="en">events</h1>
+                <h1 lang="de-DE">veranstaltungen</h1>
                 <p>
                   <table>
                     <xsl:for-each select="document('../../autotopia-events.xml')/page/news/newsfile">