CSS adjusted for second lowest level of termine table

lektor/lektordata/project/assets/static/style.css

@@ -179,10 +179,10 @@ div.page.home{
 div.page h2 {
     font-family: "Roboto-Black","Arial Bold",sans-serif;
     font-size:60px;
-    margin: 30px 0 0 0;
+    margin: 20px 0 0 0;
     padding: 22px 0 1em 0;
     font-weight: normal;
-    line-height: 50px;
+    line-height: normal;
 }
 
 div.page h3 {
@@ -191,7 +191,7 @@ div.page h3 {
     margin: 0px;
     padding: 0;
     font-weight: normal;
-    line-height: 30px;
+    line-height: normal;
 
 }
 
@@ -204,7 +204,7 @@ div.page div.threecolumn{
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 30px 50px;
+    padding: 80px 50px 30px 50px;
 
 }
 
@@ -266,13 +266,13 @@ div.left_footer, div.middle_footer, div.right_footer {
 
 
 .termine ul > li {
-  font-family: "Roboto-Light","Arial",sans-serif;;
+  font-family: "Roboto-Light","Arial",sans-serif;
   width: 1000px;
   max-width: 1140px;
 }
 
 .termine .inner_page > ul > li{
-  padding: 10px 10px 10px 10px;
+  padding: 10px;
 }
 
 .termine ul > li > div {
@@ -315,7 +315,105 @@ div.left_footer, div.middle_footer, div.right_footer {
     width: auto;
 } 
 
+@media (min-width: 1025px) and (max-width: 1100px) {
 
+    .termine ul {
+        padding: 0 0 calc(50vw * 0.091) calc(50vw * 0.091);
+        width: calc(1100vw * 0.091);
+    }
+
+    .termine ul > li {
+        width: calc(1000vw * 0.091);
+        max-width: calc(1140vw * 0.091);
+    }
+
+    .termine .inner_page > ul > li{
+        padding: calc(10vw * 0.091);
+    }
+
+    .termine ul > li > div {
+        width: calc(470vw * 0.091);
+        font-size: calc(20vw * 0.091);
+    }
+
+    .termine ul > li > ul > li {
+        width: calc(155vw * 0.091);
+    }
+
+    .termine ul > li > ul > li:nth-child(1){
+        width: calc(240vw * 0.091);
+    }
+
+    .termine ul > li > ul > li:nth-child(2){
+        width: calc(55vw * 0.091);
+    }
+
+    .termine ul > li > ul > li > div{
+        font-size: calc(20vw * 0.091);
+    } 
+
+}
+
+
+@media (min-width:769px) and (max-width:1024px) {
+
+    .termine ul {
+        display: table;
+        border-collapse: collapse;
+        padding: 0 0 calc(50vw * 0.091) calc(50vw * 0.091);
+        margin: 0 0 calc(50vw * 0.091) calc(50vw * 0.091);
+        width: calc(1000vw * 0.091);
+    }
+
+    .termine ul > li{
+        display: table-row;
+        margin: 0;
+    }
+
+
+    .termine ul > li > div{
+        width: calc(900vw * 0.091);
+        max-width: calc(900vw * 0.091);
+        text-align: left;
+        padding: calc(15vw * 0.091) calc(10vw * 0.091);
+        margin: 0;
+        display: inline-block;
+        white-space: nowrap;
+        font-family: "Roboto-Regular","Arial",sans-serif;
+    }
+
+    .termine ul > li > ul {
+        display: table-row;
+    }
+
+    .termine ul > li > ul > div{
+        font-weight: normal;
+        padding: 0;
+        margin: 0;
+        text-align: left;
+    }
+
+    .termine ul > li > ul > li {
+        display: table-cell;
+    }
+
+    .termine ul > li > ul > li > div {
+        font-family: "Roboto-Light","Arial",sans-serif;
+        padding: 0 0 calc(10vw * 0.091) calc(10vw * 0.091);
+    }
+
+    .termine ul > li > ul > li:nth-child(1) { width: calc(350vw * 0.091); }
+    .termine ul > li > ul > li:nth-child(2) { width: calc(100vw * 0.091); }
+    .termine ul > li > ul > li:nth-child(3) { width: calc(450vw * 0.091); }
+
+    .termine ul > li > ul > li:nth-child(1) > div{ width: calc(340vw * 0.091); }
+    .termine ul > li > ul > li:nth-child(2) > div{ width: calc(90vw * 0.091); }
+    .termine ul > li > ul > li:nth-child(3) > div{ width: calc(440vw * 0.091); }
+
+    .termine ul > li > div, .termine ul > li > ul > li > div {
+        font-size: 2.5vw;
+    }
+}
 
 
 @media (min-width: 769px) and (max-width: 1100px) {
@@ -351,18 +449,15 @@ div.left_footer, div.middle_footer, div.right_footer {
 
     div.page h2 {
         font-size:calc(60vw * 0.091);
-        margin: calc(30vw * 0.091) 0 0 0;
+        margin: calc(20vw * 0.091) 0 0 0;
         padding: calc(22vw * 0.091) 0 1em 0;
-        line-height: calc(50vw * 0.091);
         width: 100%;
     }
     div.page h3 {
         font-size:calc(60vw * 0.091);
-        line-height: calc(30vw * 0.091);
     }
     div.page div.threecolumn{
-        padding: calc(30vw * 0.091) calc(50vw * 0.091);
-
+        padding: calc(80vw * 0.091) calc(50vw * 0.091) calc(30vw * 0.091) calc(50vw * 0.091);
     }
     div.page div.threecolumn div{
         width: calc(300vw * 0.091);
@@ -387,6 +482,7 @@ div.left_footer, div.middle_footer, div.right_footer {
 @media (max-width: 768px) {
     header {
         height: auto;
+        background-position: 0 43.5%;
     }
     header .left_header{
         font-size: calc(24px * 0.7);
@@ -417,14 +513,12 @@ div.left_footer, div.middle_footer, div.right_footer {
         font-size:calc(60px * 0.7);
         margin: 0;
         padding: calc(22px * 0.7) 0 1em 0;
-        line-height: calc(50px * 0.7);
     }
     div.page h3 {
         font-size:calc(60px * 0.7);
-        line-height: calc(30px * 0.7);
     }
     div.page div.threecolumn{
-        padding: calc(30px * 0.7) calc(50px * 0.7);
+        padding:  calc(80px * 0.7)  calc(50px * 0.7) calc(30px * 0.7) calc(50px * 0.7);
 
     }
     div.page div.threecolumn div{

lektor/lektordata/project/content/contents.lr

@@ -4,13 +4,8 @@ title: Willkommen beim PC Stammertal
 ---
 html:
 
-<br/>
-<br/>
 <h3>Unser nächster Anlass: </h3><br/>
-<br/>
 Sonntag <strong>8. Dezember, Gangfischschiessen</strong> in Ermatingen<br/>
-<br/>
-<br/>
 <div class="threecolumn">
   <div>  
     <a href="termine/"><img src=" /images/termine_square.jpg" alt="Terminkalender"> All unsere Termine</a>