Add basic Import&Export.

berichtsheft/assets/css/notebook.css

@@ -6,15 +6,49 @@ body {
     background: darkgray;
 }
 
+#overlay {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(20,20,20,0.7);
+    z-index: 2;
+    display: none;
+}
+
+.box {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 15%;
+    width: auto;
+    height: auto;
+    min-width: 25%;
+    min-height: 25%;
+    background-color:  #ffffff;
+}
+
+#import {
+    position: absolute;
+    top:0;
+    width: 100%;
+    height: 100%;
+    display: none;
+}
+
 hr {
     border-top: 1px solid black;
 }
 
 td {
     height: 1.5em;
+    word-break: break-word;
 }
 
 table.week {
+    layout: fixed;
     width: 100%;
     height: 80%;
 }
@@ -53,7 +87,6 @@ table.week tbody:last-child tr:last-child td:first-child {
 }
 
 .vertical {
-    vertical-align: middle;
     writing-mode: vertical-lr;
     transform: rotate(180deg);
 }
@@ -94,7 +127,7 @@ table.week tbody:last-child tr:last-child td:first-child {
     height: 29.7cm;
     display: grid;
     grid-template-rows: 2cm auto 2cm;
-    background: white;
+    background: #ffffff;
 }
 
 .page:nth-child(odd) {
@@ -111,7 +144,7 @@ table.week tbody:last-child tr:last-child td:first-child {
     height: 100%;
     grid-row: 1 / 2;
     grid-column: 2 / 3;
-    background: white;
+    background: #ffffff;
 }
 
 .pg-head .flex {
@@ -155,6 +188,7 @@ div.sticky {
     position: -webkit-sticky;
     align-self: flex-start;
     top: 0;
+    z-index: 1;
 }
 
 .flex {