diff --git a/lektor/lektordata/project/assets/static/style.css b/lektor/lektordata/project/assets/static/style.css
index 8a46fc2..fa03b2e 100644
--- a/lektor/lektordata/project/assets/static/style.css
+++ b/lektor/lektordata/project/assets/static/style.css
@@ -59,6 +59,10 @@
     src:url(/static/webfonts/Roboto-ThinItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-ThinItalic.woff)format("woff")
 }
 
+@view-transition {
+  navigation: auto;
+}
+
 html{
     margin: 0px;
 }
@@ -394,6 +398,7 @@ div.left_footer, div.middle_footer, div.right_footer {
   opacity: 0;
   -webkit-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
+   width: min(700px, 63.6vw);
 }
 
 @-webkit-keyframes pulse{
@@ -743,7 +748,7 @@ div.left_footer, div.middle_footer, div.right_footer {
         border-collapse: collapse;
         padding: 0 0 calc(50px * 0.7) calc(50px * 0.7);
         margin: 0 0 calc(50px * 0.7) calc(50px* 0.7);
-        width: calc(1000px * 0.7);
+        width: 84vw;
     }
 
     .termine ul > li, .vorstand ul > li {
@@ -752,13 +757,14 @@ div.left_footer, div.middle_footer, div.right_footer {
     }
 
     .termine ul > li > div, .vorstand ul > li > div{
-        width: 680px;
+        line-height: normal;
+        width: 84vw;
         max-width: 700px;
         text-align: left;
-        padding: calc(20px * 0.7) calc(10px * 0.7) calc(15px * 0.7) calc(10px * 0.7);
-        margin: 0;
+        padding: 0;
+        margin: 7px 0 0 7px;
         display: inline-block;
-        white-space: nowrap;
+        white-space: normal;
         font-family: "Roboto-Regular","Arial",sans-serif;
     }
 
@@ -768,6 +774,7 @@ div.left_footer, div.middle_footer, div.right_footer {
         margin: 0;
         display: grid;
         grid-gap: 0;
+        width: 84vw;
     }
 
     .termine ul > li > ul,{
@@ -801,19 +808,20 @@ div.left_footer, div.middle_footer, div.right_footer {
         grid-column: span 1;
     }
     .termine ul > li > ul > li:nth-child(3) {
-        width: 700px;
+        width: 84vw;
         grid-column: span 2;
     }
 
     .vorstand ul > li > ul > li:nth-child(1), .vorstand ul > li > ul > li:nth-child(2){
-        width: 700px;
+        width: 84vw;
         grid-column: span 1;
     }
 
 
     .termine ul > li > ul > li > div, .vorstand ul > li > ul > li > div  {
         font-family: "Roboto-Light","Arial",sans-serif;
-        padding: calc(10px * 0.7) calc(10px * 0.7);
+        padding: 2px 0 0 7px;
+        margin: 0;
     }
 
     .termine ul > li > ul > li:nth-child(1) > div{ width: 250px; }
@@ -824,11 +832,13 @@ div.left_footer, div.middle_footer, div.right_footer {
         text-align: left;
       }
     .termine ul > li > ul > li:nth-child(3) > div{
-        width: 680px;
-        padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7);
+        width: 84vw;
+        line-height: 24px;
+        padding: 0;
+        margin: 0 0 0 7px;
     }
 
-    .vorstand ul > li > ul > li:nth-child(1) > div, .vorstand ul > li > ul > li:nth-child(2) > div{ width: 680px; }
+    .vorstand ul > li > ul > li:nth-child(1) > div, .vorstand ul > li > ul > li:nth-child(2) > div{ width: 84vw;}
     .vorstand ul > li > ul > li:nth-child(2) > div { padding: calc(10px * 0.7) calc(10px * 0.7) calc(20px * 0.7) calc(10px * 0.7); }