diff --git a/HaWeb/Controllers/BriefeContoller.cs b/HaWeb/Controllers/BriefeContoller.cs
index 06b752c..6bcefbf 100644
--- a/HaWeb/Controllers/BriefeContoller.cs
+++ b/HaWeb/Controllers/BriefeContoller.cs
@@ -60,8 +60,13 @@ public class Briefecontroller : Controller
         if (prevmeta != null) model.MetaData.Prev = (generateMetaViewModel(prevmeta, false), url + prevmeta.Autopsic);
         if (hands != null && hands.Any()) model.ParsedHands = HaWeb.HTMLHelpers.LetterHelpers.CreateHands(_lib, hands);
         if (editreasons != null && editreasons.Any()) model.ParsedEdits = HaWeb.HTMLHelpers.LetterHelpers.CreateEdits(_lib, _readerService, editreasons);
-        if (tradition != null && !String.IsNullOrWhiteSpace(tradition.Element)) model.ParsedTradition = HaWeb.HTMLHelpers.LetterHelpers.CreateTraditions(_lib, _readerService, marginals, tradition);
-        if (text != null && !String.IsNullOrWhiteSpace(text.Element)) model.ParsedText = HaWeb.HTMLHelpers.LetterHelpers.CreateLetter(_lib, _readerService, meta, text, marginals, hands, editreasons);
+        if (tradition != null && !String.IsNullOrWhiteSpace(tradition.Element)) model.ParsedTradition = HaWeb.HTMLHelpers.LetterHelpers.CreateTraditions(_lib, _readerService, marginals, tradition).sb_tradition.ToString();
+        if (text != null && !String.IsNullOrWhiteSpace(text.Element)) {
+            var parsedLetter = HaWeb.HTMLHelpers.LetterHelpers.CreateLetter(_lib, _readerService, meta, text, marginals, hands, editreasons);
+            (model.ParsedText, model.ParsedMarginals) = (parsedLetter.sb_lettertext.ToString(), parsedLetter.ParsedMarginals);
+            if (parsedLetter.Startline != "-1" && parsedLetter.Startline != "1" && model.MetaData.ParsedZHString != null)
+                model.MetaData.ParsedZHString += " / " + parsedLetter.Startline;
+        } 
 
         // Return
         return View(model);
@@ -78,7 +83,7 @@ public class Briefecontroller : Controller
         var senders = meta.Senders.Select(x => _lib.Persons[x].Name) ?? new List<string>();
         var recivers = meta.Receivers.Select(x => _lib.Persons[x].Name) ?? new List<string>();
         var zhstring = meta.ZH != null ? HaWeb.HTMLHelpers.LetterHelpers.CreateZHString(meta) : null;
-        return new BriefeMetaViewModel(meta, hasMarginals)
+        return new BriefeMetaViewModel(meta, hasMarginals, false)
         {
             ParsedZHString = zhstring,
             ParsedSenders = HTMLHelpers.StringHelpers.GetEnumerationString(senders),
diff --git a/HaWeb/HTMLHelpers/LetterHelpers.cs b/HaWeb/HTMLHelpers/LetterHelpers.cs
index ffd3661..88ee145 100644
--- a/HaWeb/HTMLHelpers/LetterHelpers.cs
+++ b/HaWeb/HTMLHelpers/LetterHelpers.cs
@@ -13,30 +13,24 @@ using HaWeb.Settings.ParsingRules;
 
 public static class LetterHelpers
 {
-    public static string CreateLetter(ILibrary lib, IReaderService readerService, Meta meta, Letter letter, IEnumerable<Marginal>? marginals, IEnumerable<Hand>? hands, IEnumerable<Editreason>? edits)
+    public static LetterState CreateLetter(ILibrary lib, IReaderService readerService, Meta meta, Letter letter, IEnumerable<Marginal>? marginals, IEnumerable<Hand>? hands, IEnumerable<Editreason>? edits)
     {
         var rd = readerService.RequestStringReader(letter.Element);
         var letterState = new LetterState(lib, readerService, meta, marginals, hands, edits);
         new HaWeb.HTMLParser.XMLHelper<LetterState>(letterState, rd, letterState.sb_lettertext, LetterRules.OTagRules, LetterRules.STagRules, LetterRules.CTagRules, LetterRules.TextRules, LetterRules.WhitespaceRules);
-        // new HaWeb.HTMLParser.XMLHelper<LetterState>(letterState, rd, letterState.sb_lettertext, null, LetterRules.STagRulesLineCount);
-
-        // if (marginals != null && marginals.Any())
-        // {
-        //     new HaWeb.HTMLParser.XMLHelper<LetterState>(letterState, rd, letterState.sb_lettertext, null, LetterRules.STagRulesMarginals);
-        // }
         rd.Read();
 
-        return letterState.sb_lettertext.ToString();
+        return letterState;
     }
 
-    public static string CreateTraditions(ILibrary lib, IReaderService readerService, IEnumerable<Marginal>? marginals, Tradition tradition)
+    public static TraditionState CreateTraditions(ILibrary lib, IReaderService readerService, IEnumerable<Marginal>? marginals, Tradition tradition)
     {
         var rd = readerService.RequestStringReader(tradition.Element);
         var traditionState = new TraditionState(lib, rd, readerService, marginals);
         new HaWeb.HTMLParser.XMLHelper<TraditionState>(traditionState, rd, traditionState.sb_tradition, TraditionRules.OTagRules, TraditionRules.STagRules, TraditionRules.CTagRules, TraditionRules.TextRules, TraditionRules.WhitespaceRules);
         new HaWeb.HTMLHelpers.LinkHelper(lib, rd, traditionState.sb_tradition);
         rd.Read();
-        return traditionState.sb_tradition.ToString();
+        return traditionState;
     }
 
     public static List<(string, string, string, string, string, string)> CreateEdits(ILibrary lib, IReaderService readerService, IEnumerable<Editreason> editreasons)
diff --git a/HaWeb/Models/BriefeMetaViewModel.cs b/HaWeb/Models/BriefeMetaViewModel.cs
index e31c100..b924ffc 100644
--- a/HaWeb/Models/BriefeMetaViewModel.cs
+++ b/HaWeb/Models/BriefeMetaViewModel.cs
@@ -5,6 +5,7 @@ public class BriefeMetaViewModel
 {
     public Meta Meta { get; private set; }
     public bool HasMarginals { get; private set; }
+    public bool ShowZHData { get; private set; }
 
     public string? ParsedSenders { get; set; }
     public string? ParsedReceivers { get; set; }
@@ -14,9 +15,10 @@ public class BriefeMetaViewModel
     public (BriefeMetaViewModel, string)? Prev { get; set; }
 
 
-    public BriefeMetaViewModel(Meta meta, bool hasMarginals)
+    public BriefeMetaViewModel(Meta meta, bool hasMarginals, bool showZHData)
     {
         Meta = meta;
         HasMarginals = hasMarginals;
+        ShowZHData = showZHData;
     }
 }
\ No newline at end of file
diff --git a/HaWeb/Models/BriefeViewModel.cs b/HaWeb/Models/BriefeViewModel.cs
index c51e7d2..65b8206 100644
--- a/HaWeb/Models/BriefeViewModel.cs
+++ b/HaWeb/Models/BriefeViewModel.cs
@@ -7,8 +7,7 @@ public class BriefeViewModel
     public BriefeMetaViewModel MetaData { get; private set; }
 
     public string? ParsedText { get; set; }
-    public string? ParsedLineCount { get; set; }
-    public string? ParsedMarginals { get; set; }
+    public List<(string, string, string)>? ParsedMarginals { get; set; }
     public string? ParsedTradition { get; set; }
     // From, Until, Reference, Edit, sartpage, startline
     public List<(string, string, string, string, string, string)>? ParsedEdits { get; set; }
diff --git a/HaWeb/Settings/ParsingRules/EditRules.cs b/HaWeb/Settings/ParsingRules/EditRules.cs
index ad996e4..bdf545e 100644
--- a/HaWeb/Settings/ParsingRules/EditRules.cs
+++ b/HaWeb/Settings/ParsingRules/EditRules.cs
@@ -151,7 +151,7 @@ public static class EditRules {
     })};
     
     public static readonly TagFuncList STagRules = new TagFuncList() {
-        ( ( x, _) => x.Name == "line", (sb, tag, _) => sb.Append("&emsp;") )
+        ( ( x, _) => x.Name == "line", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement("br")) )
     };
 
     public static readonly WhitespaceFuncList WhitespaceRules = new WhitespaceFuncList() {
diff --git a/HaWeb/Settings/ParsingRules/LetterRules.cs b/HaWeb/Settings/ParsingRules/LetterRules.cs
index 45e053e..ef063d7 100644
--- a/HaWeb/Settings/ParsingRules/LetterRules.cs
+++ b/HaWeb/Settings/ParsingRules/LetterRules.cs
@@ -72,10 +72,19 @@ public class LetterRules
     // Parsing Rules for Letters
     // General rules (for the lettertext column, also for parsing the marginals, awa tradtions and editreasons)
     public static readonly TagFuncList OTagRules = new TagFuncList() {
-        ( ( x, _) => x.Name == "align" && x["pos"] == "center", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ALIGNCENTERCLASS)) ),
-        ( ( x, _) => x.Name == "align" && x["pos"] == "right", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ALIGNRIGHTCLASS)) ),
+        ( ( x, _) => x.Name == "align" && x["pos"] == "center", (sb, tag, reader) => {
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ALIGNCENTERCLASS));
+            reader.State.mustwrap = true;
+        } ),
+        ( ( x, _) => x.Name == "align" && x["pos"] == "right", (sb, tag, reader) => {
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ALIGNRIGHTCLASS));
+            reader.State.mustwrap = true;
+        }),
         ( ( x, _) => x.Name == "added", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ADDEDCLASS)) ),
-        ( ( x, _) => x.Name == "sal", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, SALCLASS)) ),
+        ( ( x, _) => x.Name == "sal", (sb, tag, reader) => {
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, SALCLASS));
+            reader.State.mustwrap = true;
+        }),
         ( ( x, _) => x.Name == "aq", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, AQCLASS)) ),
         ( ( x, _) => x.Name == "super", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, SUPERCLASS)) ),
         ( ( x, _) => x.Name == "del", (sb, tag, reader) => {
@@ -92,7 +101,10 @@ public class LetterRules
         ( ( x, _) => x.Name == "up", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, UPCLASS)) ),
         ( ( x, _) => x.Name == "sub", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, SUBCLASS)) ),
         ( ( x, _) => x.Name == "tul", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, TULCLASS)) ),
-        ( ( x, _) => x.Name == "header", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, HEADERCLASS)) ),
+        ( ( x, _) => x.Name == "header", (sb, tag, reader) => {
+            reader.State.mustwrap = true;
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, HEADERCLASS)); 
+        }),
         ( ( x, _) => x.Name == "lemma", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, LEMMACLASS)) ),
         ( ( x, _) => x.Name == "eintrag", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ENTRYCLASS)) ),
         ( ( x, _) => x.Name == "titel", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, TITLECLASS)) ),
@@ -110,7 +122,10 @@ public class LetterRules
             reader.State.active_skipwhitespace = !reader.State.active_skipwhitespace;
         }),
         ( ( x, _) => x.Name == "tabs", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, TABLECLASS)) ),
-        ( ( x, _) => x.Name == "tab" && !String.IsNullOrWhiteSpace(x["value"]), (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, TABCLASS + tag["value"]))),
+        ( ( x, _) => x.Name == "tab" && !String.IsNullOrWhiteSpace(x["value"]), (sb, tag, reader) => {
+            reader.State.mustwrap = true;
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, TABCLASS + tag["value"]));
+        }),
         ( ( x, _) => x.Name == "edit" && !String.IsNullOrWhiteSpace(x["ref"]), (sb, tag, _) => {
             sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, EDITMARKERCLASS, "ea-" + tag["ref"]));
             sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
@@ -123,9 +138,15 @@ public class LetterRules
     };
 
     public static readonly TagFuncList CTagRules = new TagFuncList() {
-        ( ( x, _) => x.Name == "align", (sb, tag, _) =>  sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
+        ( ( x, _) => x.Name == "align", (sb, tag, reader) =>  {
+            reader.State.mustwrap = true;
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
+        }),
         ( ( x, _) => x.Name == "added", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
-        ( ( x, _) => x.Name == "sal", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
+        ( ( x, _) => x.Name == "sal", (sb, tag, reader) => {
+            reader.State.mustwrap = true;
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
+        }),
         ( ( x, _) => x.Name == "aq", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "super", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "del", (sb, tag, reader) => {
@@ -142,7 +163,10 @@ public class LetterRules
         ( ( x, _) => x.Name == "ful", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "sub", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "tul", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
-        ( ( x, _) => x.Name == "header", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
+        ( ( x, _) => x.Name == "header", (sb, tag, reader) => {
+            reader.State.mustwrap = true;
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
+        }),
         ( ( x, _) => x.Name == "lemma", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "eintrag", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "titel", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
@@ -157,7 +181,10 @@ public class LetterRules
         ( ( x, _) => x.Name == "letterTradition", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "marginal", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
         ( ( x, _) => x.Name == "tabs", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
-        ( ( x, _) => x.Name == "tab", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) ),
+        ( ( x, _) => x.Name == "tab", (sb, tag, reader) => {
+            reader.State.mustwrap = true;
+            sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
+        }),
         ( ( x, _) => x.Name == "hand", (sb, tag, _) => sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT)) )
     };
 
@@ -174,55 +201,47 @@ public class LetterRules
     public static readonly TagFuncList STagRules = new TagFuncList() {
         ( (x, _) => x.Name == "page", (sb, tag, reader) => reader.State.currpage = tag["index"] ),
         ( (x, _) => x.Name == "line", (sb, tag, reader) => {
-            // This is the beginning of the Text, so no <br> needed, just a special linecount
-            if(reader.State.currline == "-1") {
-                reader.State.currline = tag["index"];
-
-                // First Linecount
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHLINECOUNTCLASS, reader.State.currpage + "-" + reader.State.currline));
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHPAGECLASS + " " + FIRSTLINECLASS, ""));
-                if(reader.State.Meta.ZH != null) {
-                    sb.Append("ZH&nbsp;");
-                    sb.Append(HaWeb.HTMLHelpers.ConversionHelpers.ToRoman(Int32.Parse(reader.State.Meta.ZH.Volume)));
-                    sb.Append("&nbsp;");
-                }
-                sb.Append("S." + "&nbsp;");
-                if (tag["index"] != "1")
-                    sb.Append(reader.State.currpage + "&thinsp;/&thinsp;" + tag["index"]);
-                else
-                    sb.Append(reader.State.currpage);
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
+            if(!String.IsNullOrWhiteSpace(tag["tab"]) || !String.IsNullOrWhiteSpace(tag["type"])) {
+                reader.State.mustwrap = true;
             }
 
             // This is NOT the beginning of the text, so we set a br, and then, linecount
-            else {
-                reader.State.currline = tag["index"];
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement("br", ZHBREAKCLASS));
-
+            if(reader.State.currline != "-1") {
+                if (!reader.State.mustwrap)
+                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement("br", ZHBREAKCLASS));
+                else
+                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement("br"));
+                reader.State.mustwrap = false;
+                
                 // Linecount
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHLINECOUNTCLASS, reader.State.currpage + "-" + reader.State.currline));
+                if(!String.IsNullOrWhiteSpace(tag["index"])) { 
+                    reader.State.currline = tag["index"];
+                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHLINECOUNTCLASS, reader.State.currpage + "-" + reader.State.currline));
                 
-                // Fall 1: Neue Seite
-                if (reader.State.currline == "1") {
-                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHPAGECLASS, ""));
-                    sb.Append("S.&nbsp;" + reader.State.currpage);
-                } 
+                    // Fall 1: Neue Seite
+                    if (reader.State.currline == "1") {
+                        sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHPAGECLASS, ""));
+                        sb.Append("S.&nbsp;" + reader.State.currpage);
+                    } 
 
-                // Fall 2: Neue Zeile, teilbar durch 5
-                else if (Int32.TryParse(tag["index"], out var _) && Int32.Parse(tag["index"]) % 5 == 0) {
-                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHLINECLASS, ""));
-                    sb.Append(tag["index"]);
-                } 
-                
-                // Fall 3: Neue Zeile, nicht teilbar durch 5, deswegen versteckt
-                else {
-                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHLINECLASS + " " + HIDDENZHLINECOUNT, ""));
-                    sb.Append(tag["index"]);
+                    // Fall 2: Neue Zeile, teilbar durch 5
+                    else if (Int32.TryParse(tag["index"], out var _) && Int32.Parse(tag["index"]) % 5 == 0) {
+                        sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHLINECLASS, ""));
+                        sb.Append(tag["index"]);
+                    } 
+                    
+                    // Fall 3: Neue Zeile, nicht teilbar durch 5, deswegen versteckt
+                    else {
+                        sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, ZHLINECLASS + " " + HIDDENZHLINECOUNT, ""));
+                        sb.Append(tag["index"]);
+                    }
+
+                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
+                    sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
                 }
-
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
-                sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateEndElement(DEFAULTELEMENT));
+            } else if (reader.State.currline == "-1" && !String.IsNullOrWhiteSpace(tag["index"])) {
+                reader.State.Startline = tag["index"];
+                reader.State.currline = tag["index"];
             }
 
             // Marginalien
@@ -230,6 +249,7 @@ public class LetterRules
                 var margs = reader.State.Marginals.Where(x => x.Page == reader.State.currpage && x.Line == reader.State.currline);
                 if (margs != null && margs.Any())
                 {
+                    if(reader.State.ParsedMarginals == null) reader.State.ParsedMarginals = new List<(string, string, string)>();
                     var sb2 = new StringBuilder();
                     margs = margs.OrderBy(x => Int32.Parse(x.Index));
                     sb.Append(HaWeb.HTMLHelpers.TagHelpers.CreateElement(DEFAULTELEMENT, COMMENTMARKERCLASS, "ma-" + reader.State.currpage + "-" + reader.State.currline));
diff --git a/HaWeb/Settings/ParsingState/LetterState.cs b/HaWeb/Settings/ParsingState/LetterState.cs
index 673bc4f..bd86a2e 100644
--- a/HaWeb/Settings/ParsingState/LetterState.cs
+++ b/HaWeb/Settings/ParsingState/LetterState.cs
@@ -14,22 +14,21 @@ public class LetterState : HaWeb.HTMLParser.IState {
     internal ILibrary Lib;
     internal IReaderService ReaderService;
     internal Meta Meta;
-
     internal IEnumerable<Marginal>? Marginals;
     internal IEnumerable<Hand>? Hands;
     internal IEnumerable<Editreason>? Edits;
 
-    internal List<(string, string, string)> ParsedMarginals;
-
     // State
     internal bool active_del;
     internal bool active_skipwhitespace;
+    internal bool mustwrap;
     internal string currline;
     internal string currpage;
 
-    // Parsing-Combinations
+    // Results
     internal StringBuilder sb_lettertext;
-
+    internal List<(string, string, string)>? ParsedMarginals;
+    internal string Startline;
 
     public LetterState(ILibrary lib, IReaderService readerService, Meta meta, IEnumerable<Marginal>? marginals, IEnumerable<Hand>? hands, IEnumerable<Editreason>? edits) {
         Lib = lib;
@@ -43,11 +42,11 @@ public class LetterState : HaWeb.HTMLParser.IState {
 
 
     public void SetupState() {
-        ParsedMarginals = new List<(string, string, string)>();
         sb_lettertext = new StringBuilder();
         active_skipwhitespace = true;
         currline = "-1";
         currpage = "";
+        mustwrap = false;
 
         // Initialize State
         if (Meta.ZH != null) {
diff --git a/HaWeb/Views/Briefe/Index.cshtml b/HaWeb/Views/Briefe/Index.cshtml
index dde3338..3e53dbb 100644
--- a/HaWeb/Views/Briefe/Index.cshtml
+++ b/HaWeb/Views/Briefe/Index.cshtml
@@ -1,84 +1,141 @@
 @model BriefeViewModel;
 
-<div class="ha-letterheader">
-    @await Html.PartialAsync("/Views/Shared/_LetterHead.cshtml", Model.MetaData)
-    <div class="ha-letterheadernav">
-        <div class="ha-lettertabs">
-            <a class="active" id="ha-lettertextbtn">Brieftext</a>
-            <a class="" id="ha-additionsbtn">Überlieferung & Textkritik</a>
-            <a class="">PDF</a>
-        </div>
-    
-        @if (Model.MetaData.Next != null || Model.MetaData.Prev != null) {
-            <div class="ha-lettermetalinks">
-                @if (Model.MetaData.Prev != null) {
-                    <a href="@Model.MetaData.Prev.Value.Item2">
-                        @Model.MetaData.Prev.Value.Item1.Meta.Autopsic ◀
-                    </a>
-                }
-
-                <div class="ha-hkb">
-                    HKB
-                </div>
-
-                @if (Model.MetaData.Next != null) {
-                    <a href="@Model.MetaData.Next.Value.Item2">
-                        ▶ @Model.MetaData.Next.Value.Item1.Meta.Autopsic
-                    </a>
-                }
+<div class="ha-twilighttogglebar">
+    <div class="ha-letterheader">
+        @await Html.PartialAsync("/Views/Shared/_LetterHead.cshtml", Model.MetaData)
+        <div class="ha-letterheadernav">
+            <div class="ha-lettertabs">
+                <a class="" id="ha-lettertextbtn">Brieftext</a>
+                <a class="ha-marginalsbtn" id="ha-marginalsbtn">Stellenkommentar</a>
+                <a class="" id="ha-additionsbtn">Überlieferung & Textkritik</a>
+                <a class="">PDF</a>
             </div>
-        }
+
+            @if (Model.MetaData.Next != null || Model.MetaData.Prev != null)
+            {
+                <div class="ha-lettermetalinks">
+                    @if (Model.MetaData.Prev != null)
+                    {
+                        <a href="@Model.MetaData.Prev.Value.Item2">
+                            @Model.MetaData.Prev.Value.Item1.Meta.Autopsic ◀
+                        </a>
+                    }
+
+                    <div class="ha-hkb">
+                        HKB
+                    </div>
+
+                    @if (Model.MetaData.Next != null)
+                    {
+                        <a href="@Model.MetaData.Next.Value.Item2">
+                            ▶ @Model.MetaData.Next.Value.Item1.Meta.Autopsic
+                        </a>
+                    }
+                </div>
+            }
+        </div>
     </div>
 </div>
 
 <div class="ha-letterbody">
     <div class="ha-lettertext" id="ha-lettertext">
-        @if (Model.ParsedText != null) {
+        @if (Model.ParsedText != null)
+        {
+            <div class="ha-linecount ha-firstline">
+                    @if (Model.MetaData.ParsedZHString != null) {
+                        <span>@Html.Raw(Model.MetaData.ParsedZHString)</span>
+                    }
+                    else {
+                        <div class="ha-tooltip">
+                            <div class="ha-pill">
+                                <span>Neu</span>
+                            </div>
+                        </div>
+                    }
+            </div>
             @Html.Raw(@Model.ParsedText)
         }
     </div>
+
+    <div class="ha-marginals" id="ha-marginals">
+        @if (Model.ParsedMarginals != null)
+        {
+            <table>
+
+                @foreach (var marginal in Model.ParsedMarginals)
+                {
+                    <tr>
+                        <td class="ha-marginalfromto">@marginal.Item1/@marginal.Item2</td>
+                        <td class="ha-marginaltext">@Html.Raw(@marginal.Item3)</td>
+                    </tr>
+                }
+            </table>
+
+        }
+    </div>
+
     <div class="ha-additions" id="ha-additions">
-        @if (Model.ParsedTradition != null) {
+        @if (Model.ParsedTradition != null)
+        {
             @Html.Raw(Model.ParsedTradition)
         }
-        @if(Model.ParsedHands != null && Model.ParsedHands.Any()) {
+
+        @if (Model.ParsedHands != null && Model.ParsedHands.Any())
+        {
             <div class="ha-hands">
                 <div class="ha-handstitle">Zusätze fremder Hand</div>
                 <div class="ha-handentries">
                     <table>
-                    @foreach (var hand in Model.ParsedHands) {
-                        <tr class="ha-handentry">
-                            @* Not beautiful, but here's whitespace in between otherwise *@
-                            <td><div class="ha-handfrom">@hand.Item1</div>@if (!String.IsNullOrEmpty(hand.Item2)) {<div class="ha-handto">–@hand.Item2</div>
-                            }</td>
-                            <td class="ha-handperson">@hand.Item3</td>
-                        </tr>
-                    }
+                        @foreach (var hand in Model.ParsedHands)
+                        {
+                            <tr class="ha-handentry">
+                                <td>
+                                @* Not beautiful, but here's whitespace in between otherwise *@
+                                    <div class="ha-handfrom">@hand.Item1</div>@if (!String.IsNullOrEmpty(hand.Item2)) {<div class="ha-handto">–@hand.Item2</div>
+                                    }
+                                </td>
+                                <td class="ha-handperson">@hand.Item3</td>
+                            </tr>
+                        }
                     </table>
                 </div>
             </div>
         }
 
-        @if (Model.ParsedEdits != null) {
+        @if (Model.ParsedEdits != null)
+        {
             <div class="ha-edits">
                 <div class="ha-editstitle">Textkritische Anmerkungen</div>
-                <div class="ha-editsinfo">Der Brieftext wurde anhand der überlieferten Quellen (vgl. Provenienz) kritisch geprüft. Notwendige Korrekturen gegenüber dem in ZH gedruckten Text wurden vorgenommen und sind vollständig annotiert. Die in den beiden Auflagen von ZH angehängten Korrekturvorschläge werden vollständig aufgelistet, werden aber nur dann im Text realisiert, sofern diese anhand überlieferter Quellen verifiziert werden konnten.</div>
+                <div class="ha-editsinfo">Der Brieftext wurde anhand der überlieferten Quellen (vgl. Provenienz) kritisch
+                    geprüft. Notwendige Korrekturen gegenüber dem in ZH gedruckten Text wurden vorgenommen und sind
+                    vollständig annotiert. Die in den beiden Auflagen von ZH angehängten Korrekturvorschläge werden
+                    vollständig aufgelistet, werden aber nur dann im Text realisiert, sofern diese anhand überlieferter
+                    Quellen verifiziert werden konnten.</div>
                 <div class="ha-editentries">
                     <table>
-                    @foreach (var edit in Model.ParsedEdits) {
-                        <tr>
-                            <td class="ha-editfromto">
-                            <div class="ha-editfrom">@edit.Item1</div>@if (!String.IsNullOrEmpty(edit.Item2)) {<div class="ha-editto">–@edit.Item2</div>
-                            }</td>
-                            <td class="ha-editreference">@Html.Raw(@edit.Item3)</td>
-                            <td class="ha-editreas">@Html.Raw(@edit.Item4)</td>
-                        </tr>
-                    }
+                        @foreach (var edit in Model.ParsedEdits)
+                        {
+                            <tr>
+                                <td class="ha-editfromto">
+                                    <div class="ha-editfrom">@edit.Item1</div>@if (!String.IsNullOrEmpty(edit.Item2)) {<div class="ha-editto">–@edit.Item2</div>
+                                    }
+                                </td>
+                                <td class="ha-editreference">
+                                    @if (!String.IsNullOrWhiteSpace(edit.Item3))
+                                    {
+                                        <span>
+                                            @Html.Raw(@edit.Item3)]
+                                        </span>
+                                    }
+                                </td>
+                                <td class="ha-editreas">
+                                    @Html.Raw(@edit.Item4)
+                                </td>
+                            </tr>
+                        }
                     </table>
                 </div>
             </div>
         }
     </div>
 </div>
-
-
diff --git a/HaWeb/Views/Shared/_Footer.cshtml b/HaWeb/Views/Shared/_Footer.cshtml
index fde91e1..421f1fe 100644
--- a/HaWeb/Views/Shared/_Footer.cshtml
+++ b/HaWeb/Views/Shared/_Footer.cshtml
@@ -1,3 +1,20 @@
 <div class="ha-footer">
-     <a href="/Edition/Kontakt">Kontakt</a> · <a href="/Edition/Datenschutzerklaerung">Datenschutzerklärung</a>
-</div>
\ No newline at end of file
+     <div class="ha-footertext flex flex-row shrink-0 grow-1">
+          <div class="flex grow shrink-0">
+               <div class="ha-themetoggles">
+                    <input type="radio" id="ha-toggledark" name="ha-themetoggle">
+                    <input type="radio" id="ha-toggletwilight" name="ha-themetoggle">
+                    <input type="radio" id="ha-togglebright" name="ha-themetoggle">
+                    <label for="ha-toggledark"></label>
+                    <label for="ha-toggletwilight"></label>
+                    <label for="ha-togglebright"></label>
+                    <div class="ha-themetoggleslider">
+                    </div>
+               </div>
+          </div>
+               <div class="grow-0 shrink-0">
+                    © 2022 Theodor Springmann Stiftung | Stand vom 27.5.2022 | <a href="/Edition/Kontakt">Kontakt</a> ·
+                    <a href="/Edition/Datenschutzerklaerung">Datenschutzerklärung</a>
+               </div>
+          </div>
+     </div>
\ No newline at end of file
diff --git a/HaWeb/Views/Shared/_LetterHead.cshtml b/HaWeb/Views/Shared/_LetterHead.cshtml
index db5db8d..1eeca76 100644
--- a/HaWeb/Views/Shared/_LetterHead.cshtml
+++ b/HaWeb/Views/Shared/_LetterHead.cshtml
@@ -12,14 +12,14 @@
                 <div class="ha-metadatadate">
                     @Model.Meta.Date
                 </div>
-                @if (Model.ParsedZHString != null) {
+                @if (Model.ParsedZHString != null && Model.ShowZHData) {
                     <div class="ha-tooltip">
                         <div class="ha-pill">
-                            <span>@Model.ParsedZHString</span>
+                            <span>@Html.Raw(Model.ParsedZHString)</span>
                         </div>
                     </div>
                 }
-                else {
+                else if (Model.ParsedZHString == null && Model.ShowZHData) {
                     <div class="ha-tooltip">
                         <div class="ha-pill">
                             <span>Neu</span>
diff --git a/HaWeb/tailwind.config.js b/HaWeb/tailwind.config.js
index 2cbbc6f..5c19b4e 100644
--- a/HaWeb/tailwind.config.js
+++ b/HaWeb/tailwind.config.js
@@ -1,9 +1,19 @@
 module.exports = {
+  darkMode: 'class',
   content: [
     "./wwwroot/**/*.{html,js}",
     "./Views/**/*.{cshtml,html,js}",
     "./Settings/CSSClassesSettings.cs"
   ],
+  safelist: [
+    "ha-indent-1",
+    "ha-indent-2",
+    "ha-indent-3",
+    "ha-indent-4",
+    "ha-indent-5",
+    "ha-indent-6",
+    "ha-indent-7",
+  ],
   theme: {
     fontFamily: {
       sans: ['Biolinum', 'sans-serif'],
@@ -11,7 +21,7 @@ module.exports = {
       classy: ['Playfair', 'serif'],
     },
     screens: {
-      'sm': '786px',
+      'sm': '700px',
       'md': '960px',
       'desktop': '1190px',
       'xl': '1440px',
diff --git a/HaWeb/wwwroot/css/output.css b/HaWeb/wwwroot/css/output.css
index c8fed6e..140121c 100644
--- a/HaWeb/wwwroot/css/output.css
+++ b/HaWeb/wwwroot/css/output.css
@@ -600,31 +600,24 @@ body {
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
 }
 
+/* Classes for the footer */
+
 .ha-footer {
+  font-family: Libertine, serif;
+}
+
+.ha-footer .ha-footertext {
   margin-left: auto;
   margin-right: auto;
-  margin-top: 1rem;
-  height: 4rem;
-  width: 100%;
+  max-width: 1190px;
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-  padding: 1rem;
+  padding: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
   text-align: right;
-  font-family: Libertine, serif;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-@media (min-width: 960px) {
-  .ha-footer {
-    padding: 1rem;
-  }
-}
-
-@media (min-width: 1190px) {
-  .ha-footer {
-    padding: 1rem;
-  }
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .ha-footer a {
@@ -635,12 +628,79 @@ body {
 }
 
 .ha-footer a:hover {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
   -webkit-text-decoration-style: solid;
           text-decoration-style: solid;
 }
 
+.ha-footer .ha-themetoggles {
+  position: relative;
+  height: 1rem;
+  width: 49px;
+  white-space: nowrap;
+  border-radius: 1.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.ha-footer .ha-themetoggles * {
+  float: left;
+}
+
+.ha-footer .ha-themetoggles input[type="radio"] {
+  display: none;
+}
+
+.ha-footer .ha-themetoggles label {
+  z-index: 10;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  margin-left: 2px;
+  margin-right: 2px;
+  display: block;
+  height: 11px;
+  width: 11px;
+  cursor: pointer;
+  border-radius: 1.5rem;
+  text-align: center;
+}
+
+.ha-footer .ha-themetoggles .ha-themetoggleslider {
+  position: absolute;
+  top: 3px;
+  height: 11px;
+  width: 11px;
+  border-radius: 1.5rem;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-duration: 100ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
+  left: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
+.ha-footer .ha-themetoggles #ha-toggletwilight:checked ~ .ha-themetoggleslider {
+  left: 19px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
+.ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
+  left: 34px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
 /* Classes for static pages */
 
 .ha-static {
@@ -808,6 +868,8 @@ body {
 }
 
 .ha-register .ha-register-head {
+  border-top-left-radius: 0.125rem;
+  border-top-right-radius: 0.125rem;
   border-bottom-width: 2px;
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
@@ -871,6 +933,8 @@ body {
 }
 
 .ha-register .ha-register-body {
+  border-bottom-right-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
   padding-bottom: 2.25rem;
 }
 
@@ -935,7 +999,12 @@ body {
   font-weight: 700;
 }
 
-.ha-register .ha-forschung .ha-register-body .ha-comment .ha-commenthead .ha-lemma {
+.ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-comment
+    .ha-commenthead
+    .ha-lemma {
   display: inline;
   font-weight: 400;
 }
@@ -972,18 +1041,43 @@ body {
   }
 }
 
-.ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
+.ha-register
+    .ha-register-body
+    .ha-comment
+    .ha-commenthead
+    .ha-letlinks
+    .ha-hkb {
   display: inline;
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
 @media (min-width: 1190px) {
-  .ha-register .ha-neuzeit .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
+  .ha-register
+    .ha-neuzeit
+    .ha-register-body
+    .ha-headcomment
+    .ha-commenthead
+    .ha-letlinks, .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-headcomment
+    .ha-commenthead
+    .ha-letlinks {
     left: 48rem;
   }
 
-  .ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks, .ha-register .ha-forschung .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
+  .ha-register
+    .ha-neuzeit
+    .ha-register-body
+    .ha-subcomment
+    .ha-commenthead
+    .ha-letlinks, .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-subcomment
+    .ha-commenthead
+    .ha-letlinks {
     left: 46rem;
   }
 }
@@ -1073,7 +1167,11 @@ body {
   line-height: 1.375;
 }
 
-.ha-letterhead .ha-metadata .ha-metadatarows .ha-metadataupperrow .ha-metadatadate {
+.ha-letterhead
+    .ha-metadata
+    .ha-metadatarows
+    .ha-metadataupperrow
+    .ha-metadatadate {
   display: flex;
   font-variant-numeric: oldstyle-nums;
   font-variant-caps: petite-caps;
@@ -1153,6 +1251,8 @@ body {
 /* Classes for Letter View */
 
 .ha-letterheader {
+  border-top-left-radius: 0.125rem;
+  border-top-right-radius: 0.125rem;
   border-bottom-width: 2px;
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
@@ -1163,6 +1263,13 @@ body {
   padding-top: 2rem;
 }
 
+.dark .ha-letterheader {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(248 250 252 / var(--tw-text-opacity));
+}
+
 @media (min-width: 960px) {
   .ha-letterheader {
     padding-left: 4rem;
@@ -1201,6 +1308,10 @@ body {
   .ha-letterheader .ha-lettertabs a {
     margin-right: 0.75rem;
   }
+
+  .ha-letterheader .ha-lettertabs .ha-marginalsbtn {
+    display: none;
+  }
 }
 
 .ha-letterheader .ha-lettertabs a.active {
@@ -1244,57 +1355,130 @@ body {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  border-bottom-right-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-  padding-bottom: 2rem;
 }
 
 .ha-lettertext {
   position: relative;
-  margin-left: 3rem;
-  flex-shrink: 0;
-  border-left-width: 2px;
+  margin-left: 1rem;
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 1rem;
+  padding-bottom: 2rem;
   font-family: Libertine, serif;
   line-height: 1.48;
   font-variant-numeric: oldstyle-nums;
 }
 
+@media (min-width: 700px) {
+  .ha-lettertext {
+    margin-left: 3rem;
+    flex-shrink: 0;
+    border-left-width: 2px;
+  }
+}
+
+.ha-marginals {
+  position: relative;
+  margin-left: 1rem;
+  max-width: 48rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  line-height: 1.48;
+  font-variant-numeric: oldstyle-nums;
+}
+
+@media (min-width: 960px) {
+  .ha-marginals {
+    margin-left: 3rem;
+  }
+}
+
+.ha-marginals table td {
+  vertical-align: text-top;
+}
+
+.ha-marginals .ha-marginalfromto {
+  white-space: nowrap;
+  padding-right: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+
+.ha-marginals .ha-marginaltext .ha-bzg {
+  display: inline;
+}
+
+.ha-marginals .ha-marginaltext a {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  -webkit-text-decoration-style: dotted;
+          text-decoration-style: dotted;
+}
+
+.ha-marginals .ha-marginaltext a:hover {
+  -webkit-text-decoration-style: solid;
+          text-decoration-style: solid;
+}
+
 .ha-additions .ha-tradition div {
   display: inline;
 }
 
 .ha-additions .ha-tradition {
-  max-width: 48rem;
+  max-width: 56rem;
 }
 
 .ha-additions {
   position: relative;
-  margin-left: 3rem;
+  margin-left: 1rem;
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 1rem;
+  padding-bottom: 1rem;
   font-family: Libertine, serif;
   line-height: 1.48;
   font-variant-numeric: oldstyle-nums;
 }
 
+@media (min-width: 960px) {
+  .ha-additions {
+    margin-left: 3rem;
+  }
+}
+
 .ha-additions .ha-app {
-  display: inline-block !important;
+  display: block !important;
   padding-top: 1.5rem;
   font-weight: 700;
 }
 
+.ha-additions .ha-app + br {
+  display: none;
+}
+
 .ha-additions .ha-tradition .ha-app:first-child {
   padding-top: 0px;
 }
 
+.ha-additions .ha-tradition {
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+}
+
 .ha-additions .ha-tradition .ha-tradzhtext {
   position: relative;
   margin-left: -1rem;
@@ -1304,40 +1488,9 @@ body {
   width: fit-content;
   padding-left: 1rem;
   font-family: Libertine, serif;
-}
-
-.ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-firstline {
-  border-radius: 0.25rem;
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.ha-additions .ha-tradition .ha-tradzhtext .ha-linecount {
-  position: absolute;
-  left: -8.6rem;
-  margin-top: 0.25rem;
-  width: 8rem;
-  text-align: right;
-  font-family: Biolinum, sans-serif;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  --tw-numeric-figure: oldstyle-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-zhpage, .ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-zhline {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  padding-bottom: 0.25rem;
-  font-variant-numeric: normal;
-  font-variant-caps: all-petite-caps;
-}
-
-.ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-hiddenlinecount {
-  display: none;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
 }
 
 .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox {
@@ -1497,6 +1650,7 @@ body {
 }
 
 .ha-additions .ha-edits {
+  max-width: 56rem;
   padding-top: 1.5rem;
 }
 
@@ -1505,8 +1659,10 @@ body {
 }
 
 .ha-additions .ha-edits .ha-editsinfo {
-  margin-right: 18rem;
   padding-bottom: 1rem;
+  -webkit-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
 }
 
 .ha-additions .ha-edits .ha-editentries tr td {
@@ -1522,13 +1678,12 @@ body {
   /* @apply w-full */
 }
 
-.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(1) {
+.ha-additions .ha-edits .ha-editentries .ha-editfromto {
   padding-right: 0.25rem;
   padding-left: 0.25rem;
-  text-align: right;
 }
 
-.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2) {
+.ha-additions .ha-edits .ha-editentries .ha-editreference {
   border-right-width: 2px;
   padding-left: 0.25rem;
   padding-right: 0.75rem;
@@ -1536,13 +1691,19 @@ body {
   line-height: 1.25rem;
 }
 
-.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(3) {
+.ha-additions .ha-edits .ha-editentries .ha-editreference br {
+  display: none;
+}
+
+.ha-additions .ha-edits .ha-editentries .ha-editreas {
+  width: 100%;
   padding-left: 0.75rem;
 }
 
-/* .ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
-        @apply bg-slate-200
-    } */
+.ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+}
 
 .ha-additions .ha-edits .ha-editentries .ha-editreas .ha-zh * {
   font-family: Libertine, serif !important;
@@ -1556,38 +1717,93 @@ body {
   display: inline;
 }
 
-.ha-lettertext .ha-linecount .ha-firstline {
+.ha-linecount.ha-firstline {
+  display: none;
+  white-space: nowrap;
   border-radius: 0.25rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  font-variant-numeric: normal;
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  font-variant-caps: all-petite-caps;
 }
 
-.ha-lettertext .ha-linecount {
-  position: absolute;
-  left: -8.6rem;
-  margin-top: 0.25rem;
-  width: 8rem;
-  text-align: right;
+@media (min-width: 700px) {
+  .ha-linecount.ha-firstline {
+    left: -4rem;
+    display: inline-block;
+    max-width: 5rem;
+    --tw-bg-opacity: 1;
+    background-color: rgb(241 245 249 / var(--tw-bg-opacity));
+    padding-bottom: 0.25rem;
+  }
+}
+
+@media (min-width: 1190px) {
+  .ha-linecount.ha-firstline {
+    left: -5.5rem;
+  }
+}
+
+.ha-linecount {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   font-family: Biolinum, sans-serif;
   font-size: 0.75rem;
   line-height: 1rem;
-  --tw-numeric-figure: oldstyle-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
-.ha-lettertext .ha-linecount .ha-zhpage, .ha-lettertext .ha-linecount .ha-zhline {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+@media (min-width: 700px) {
+  .ha-linecount {
+    position: absolute;
+    left: -8.6rem;
+    margin-top: 0.25rem;
+    width: 8rem;
+    text-align: right;
+  }
+}
+
+.ha-linecount .ha-zhline {
+  display: none;
+}
+
+@media (min-width: 700px) {
+  .ha-linecount .ha-zhline {
+    display: inline;
+  }
+}
+
+.ha-linecount .ha-zhpage {
+  display: inline-block;
+}
+
+@media (min-width: 700px) {
+  .ha-linecount .ha-zhpage {
+    display: inline;
+  }
+}
+
+.ha-linecount .ha-zhpage, .ha-linecount .ha-zhline {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
-  padding-bottom: 0.25rem;
   font-variant-numeric: normal;
   font-variant-caps: all-petite-caps;
 }
 
-.ha-lettertext .ha-linecount .ha-hiddenlinecount {
-  display: none;
+@media (min-width: 700px) {
+  .ha-linecount .ha-zhpage, .ha-linecount .ha-zhline {
+    --tw-bg-opacity: 1;
+    background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+    padding-bottom: 0.25rem;
+  }
+}
+
+.ha-linecount .ha-hiddenlinecount {
+  display: none !important;
 }
 
 .ha-lettertext .ha-marginalbox {
@@ -1691,6 +1907,16 @@ body {
 
 /* Classes from .NET */
 
+.ha-zhbreak {
+  display: none;
+}
+
+@media (min-width: 700px) {
+  .ha-zhbreak {
+    display: inline;
+  }
+}
+
 .ha-up {
   position: relative;
   top: -0.75rem;
@@ -1734,12 +1960,16 @@ body {
           text-decoration-line: line-through;
 }
 
-.ha-hand, .ha-hand * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+.ha-hand, .ha-hand
+    *
+    :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
   font-family: Playfair, serif;
   font-size: 0.9rem;
 }
 
-.ha-added, .ha-added * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+.ha-added, .ha-added
+    *
+    :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
   border-radius: 0.125rem;
   --tw-bg-opacity: 1;
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
@@ -1747,7 +1977,9 @@ body {
   padding-right: 0.25rem;
 }
 
-.ha-note, .ha-note * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+.ha-note, .ha-note
+    *
+    :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
   font-style: italic;
   --tw-text-opacity: 1;
   color: rgb(51 65 85 / var(--tw-text-opacity));
@@ -1805,17 +2037,15 @@ body {
 }
 
 .ha-alignright {
-  position: absolute;
-  right: 0.25rem;
+  float: right;
 }
 
 .ha-aligncenter {
   position: absolute;
-  right: 0px;
-  left: 0px;
-  min-width: 33%;
+  left: 50%;
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   white-space: nowrap;
-  text-align: center;
 }
 
 .ha-sal {
@@ -1823,6 +2053,78 @@ body {
   display: inline-block;
 }
 
+/* Classes for indents */
+
+.ha-indent-1 {
+  padding-left: 0.5rem;
+}
+
+@media (min-width: 700px) {
+  .ha-indent-1 {
+    padding-left: 1rem;
+  }
+}
+
+.ha-indent-2 {
+  padding-left: 1rem;
+}
+
+@media (min-width: 700px) {
+  .ha-indent-2 {
+    padding-left: 2rem;
+  }
+}
+
+.ha-indent-3 {
+  padding-left: 1.5rem;
+}
+
+@media (min-width: 700px) {
+  .ha-indent-3 {
+    padding-left: 3rem;
+  }
+}
+
+.ha-indent-4 {
+  padding-left: 2rem;
+}
+
+@media (min-width: 700px) {
+  .ha-indent-4 {
+    padding-left: 4rem;
+  }
+}
+
+.ha-indent-5 {
+  padding-left: 2.5rem;
+}
+
+@media (min-width: 700px) {
+  .ha-indent-5 {
+    padding-left: 5rem;
+  }
+}
+
+.ha-indent-6 {
+  padding-left: 5rem;
+}
+
+@media (min-width: 700px) {
+  .ha-indent-6 {
+    padding-left: 11rem;
+  }
+}
+
+.ha-indent-7 {
+  padding-left: 8rem;
+}
+
+@media (min-width: 700px) {
+  .ha-indent-7 {
+    padding-left: 16rem;
+  }
+}
+
 /* Classes from Javascript */
 
 .active {
@@ -1912,12 +2214,16 @@ body {
     display: inline-block;
   }
 
-  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown:hover
+    .ha-topnav-dropdown-content {
     display: block;
   }
 }
 
-.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
+.ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content {
   display: block;
   border-style: none;
   padding-top: 0px;
@@ -1927,7 +2233,9 @@ body {
 }
 
 @media (min-width: 1190px) {
-  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content {
     display: none;
     border-bottom-width: 1px;
     padding-top: 0.5rem;
@@ -1937,13 +2245,19 @@ body {
   }
 }
 
-.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+.ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content
+    a {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
 @media (min-width: 1190px) {
-  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content
+    a {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
@@ -2092,14 +2406,14 @@ body {
   flex-shrink: 1;
 }
 
-.grow-0 {
-  flex-grow: 0;
-}
-
 .grow {
   flex-grow: 1;
 }
 
+.grow-0 {
+  flex-grow: 0;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -2239,9 +2553,9 @@ body {
 */
 
 @font-face {
-  font-family: 'Biolinum';
+  font-family: "Biolinum";
 
-  src: url('../fonts/LinBiolinum_R.woff') format('woff');
+  src: url("../fonts/LinBiolinum_R.woff") format("woff");
 
   font-display: swap;
 
@@ -2251,9 +2565,9 @@ body {
 }
 
 @font-face {
-  font-family: 'Libertine';
+  font-family: "Libertine";
 
-  src: url('../fonts/LinLibertine_R.woff') format('woff');
+  src: url("../fonts/LinLibertine_R.woff") format("woff");
 
   font-display: swap;
 
@@ -2263,9 +2577,9 @@ body {
 }
 
 @font-face {
-  font-family: 'Biolinum';
+  font-family: "Biolinum";
 
-  src: url('../fonts/LinBiolinum_RI.woff') format('woff');
+  src: url("../fonts/LinBiolinum_RI.woff") format("woff");
 
   font-display: swap;
 
@@ -2275,9 +2589,9 @@ body {
 }
 
 @font-face {
-  font-family: 'Biolinum';
+  font-family: "Biolinum";
 
-  src: url('../fonts/LinBiolinum_RB.woff') format('woff');
+  src: url("../fonts/LinBiolinum_RB.woff") format("woff");
 
   font-display: swap;
 
@@ -2287,9 +2601,9 @@ body {
 }
 
 @font-face {
-  font-family: 'Libertine';
+  font-family: "Libertine";
 
-  src: url('../fonts/LinLibertine_RI.woff') format('woff');
+  src: url("../fonts/LinLibertine_RI.woff") format("woff");
 
   font-display: swap;
 
@@ -2299,9 +2613,9 @@ body {
 }
 
 @font-face {
-  font-family: 'Libertine';
+  font-family: "Libertine";
 
-  src: url('../fonts/LinLibertine_RB.woff') format('woff');
+  src: url("../fonts/LinLibertine_RB.woff") format("woff");
 
   font-display: swap;
 
@@ -2311,9 +2625,9 @@ body {
 }
 
 @font-face {
-  font-family: 'Playfair';
+  font-family: "Playfair";
 
-  src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
+  src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
 
   font-display: swap;
 
@@ -2323,43 +2637,43 @@ body {
 }
 
 .ha-lettertext .ha-marginalbox .ha-marginal::after {
-  content: '';
+  content: "";
 }
 
 .ha-lettertext .ha-marginalbox .ha-marginal:last-of-type::after {
-  content: '';
+  content: "";
 }
 
 .ha-nr::before {
-  content: ' \200E\25E6';
+  content: " \200E\25E6";
 }
 
 .ha-nr::after {
-  content: ' \200E\25E6';
+  content: " \200E\25E6";
 }
 
 .ha-added::before {
-  content: '';
+  content: "";
 }
 
 .ha-added::after {
-  content: '';
+  content: "";
 }
 
 .ha-note::before {
-  content: '';
+  content: "";
 }
 
 .ha-note::after {
-  content: '';
+  content: "";
 }
 
 .ha-bzg::after {
-  content: ']';
+  content: "]";
 }
 
 .ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2)::after {
-  content:  ']';
+  content: "";
 }
 
 * {
@@ -2368,8 +2682,8 @@ body {
 }
 
 body {
-  background-image:url('../img/subtlenet2.png');
-  background-repeat:repeat;
+  background-image: url("../img/subtlenet2.png");
+  background-repeat: repeat;
 }
 
 /* ul {
@@ -2382,8 +2696,9 @@ body {
   display: inline-block;
 }
 
-.diagdel::before, .diagdel::after {
-  content: '';
+.diagdel::before,
+.diagdel::after {
+  content: "";
   width: 100%;
   height: 0%;
   position: absolute;
@@ -2405,7 +2720,7 @@ body {
 }
 
 .del .del .ul,
-.ul .del .del, 
+.ul .del .del,
 .del .ul .del {
   text-decoration: line-through underline;
   -moz-text-decoration-style: double;
@@ -2423,7 +2738,7 @@ body {
 }
 
 .downshadow-sm {
-  box-shadow: 5px 6px 5px -7px rgba(0,0,0,0.79);
+  box-shadow: 5px 6px 5px -7px rgba(0, 0, 0, 0.79);
 }
 
 .hyphenate {
@@ -2475,19 +2790,19 @@ body {
 }
 
 .ha-menusymbol {
-  background:var(--white);
-  border-radius:4px;
+  background: var(--white);
+  border-radius: 4px;
 }
 
 .ha-menusymbol svg {
-  width:24px;
-  height:24px;
-  stroke:#000000;
-  stroke-width:2;
-  stroke-linecap:round;
-  stroke-linejoin:miter;
-  fill:none;
-  color:#000000;
+  width: 24px;
+  height: 24px;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: miter;
+  fill: none;
+  color: #000000;
 }
 
 .ha-tooltip .ha-tooltiptext {
@@ -2509,7 +2824,8 @@ body {
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent transparent;
+  border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent
+    transparent;
 }
 
 .ha-tooltip:hover .ha-tooltiptext {
@@ -2518,50 +2834,20 @@ body {
 }
 
 .ha-open-btn-collapsed-box::before {
-  content: '\200E+';
+  content: "\200E+";
   font-weight: 900;
 }
 
 .ha-close-btn-collapsed-box::before {
-  content: '\200E\00D7';
+  content: "\200E\00D7";
   font-weight: 900;
 }
 
-/* Classes for indents */
-
-.ha-indent-1 {
-  padding-left: 1rem;
-  background-color: var(--hamannWeiss);
-}
-
-.ha-indent-2 {
-  padding-left: 2rem;
-  background-color: var(--hamannWeiss);
-}
-
-.ha-indent-3 {
-  padding-left: 3rem;
-  background-color: var(--hamannWeiss);
-}
-
-.ha-indent-4 {
-  padding-left: 4rem;
-  background-color: var(--hamannWeiss);
-}
-
-.ha-indent-5 {
-  padding-left: 5rem;
-  background-color: var(--hamannWeiss);
-}
-
-.ha-indent-6 {
-  padding-left: 11rem;
-  background-color: var(--hamannWeiss);
-}
-
-.ha-indent-7 {
-  padding-left: 16rem;
-  background-color: var(--hamannWeiss);
+.ha-text {
+  -webkit-user-select: contain;
+     -moz-user-select: contain;
+      -ms-user-select: element;
+          user-select: contain;
 }
 
 /* Classes for tables */
@@ -3100,29 +3386,21 @@ body {
   min-width: 8.333%;
 }
 
-.ha-cross::before, .ha-cross::after {
-  content: '';
+.ha-cross::before,
+.ha-cross::after {
+  content: "";
 }
 
 .ha-cross::before {
   transform: skewY(-27deg);
 }
 
-/* Not possible otherwise, overwrites javascript set style values, which cant be defined before render */
-
-/* @media (max-width: 1190px) {
-    .ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
-        height: auto !important;
-        overflow: unset !important;
-    }
-} */
-
 .hover\:text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
-@media (min-width: 786px) {
+@media (min-width: 700px) {
   .sm\:inline {
     display: inline;
   }
diff --git a/HaWeb/wwwroot/css/site.css b/HaWeb/wwwroot/css/site.css
index cb22f9a..974c3df 100644
--- a/HaWeb/wwwroot/css/site.css
+++ b/HaWeb/wwwroot/css/site.css
@@ -24,825 +24,960 @@
 */
 
 @font-face {
-    font-family: 'Biolinum';
-    src: url('../fonts/LinBiolinum_R.woff') format('woff');
-    font-display: swap;
-    font-weight: normal;
-    font-style: normal;
+  font-family: "Biolinum";
+  src: url("../fonts/LinBiolinum_R.woff") format("woff");
+  font-display: swap;
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Libertine';
-    src: url('../fonts/LinLibertine_R.woff') format('woff');
-    font-display: swap;
-    font-weight: normal;
-    font-style: normal;
+  font-family: "Libertine";
+  src: url("../fonts/LinLibertine_R.woff") format("woff");
+  font-display: swap;
+  font-weight: normal;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Biolinum';
-    src: url('../fonts/LinBiolinum_RI.woff') format('woff');
-    font-display: swap;
-    font-weight: normal;
-    font-style: italic;
+  font-family: "Biolinum";
+  src: url("../fonts/LinBiolinum_RI.woff") format("woff");
+  font-display: swap;
+  font-weight: normal;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Biolinum';
-    src: url('../fonts/LinBiolinum_RB.woff') format('woff');
-    font-display: swap;
-    font-weight: bold;
-    font-style: normal;
+  font-family: "Biolinum";
+  src: url("../fonts/LinBiolinum_RB.woff") format("woff");
+  font-display: swap;
+  font-weight: bold;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Libertine';
-    src: url('../fonts/LinLibertine_RI.woff') format('woff');
-    font-display: swap;
-    font-weight: normal;
-    font-style: italic;
+  font-family: "Libertine";
+  src: url("../fonts/LinLibertine_RI.woff") format("woff");
+  font-display: swap;
+  font-weight: normal;
+  font-style: italic;
 }
 
 @font-face {
-    font-family: 'Libertine';
-    src: url('../fonts/LinLibertine_RB.woff') format('woff');
-    font-display: swap;
-    font-weight: bold;
-    font-style: normal;
+  font-family: "Libertine";
+  src: url("../fonts/LinLibertine_RB.woff") format("woff");
+  font-display: swap;
+  font-weight: bold;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'Playfair';
-    src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
-    font-display: swap;
-    font-weight: normal;
-    font-style: normal;
+  font-family: "Playfair";
+  src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+  font-display: swap;
+  font-weight: normal;
+  font-style: normal;
 }
 
 @layer components {
-    /* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
-    body {
-        @apply text-base desktop:text-lg w-full h-full
-    }
+  /* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
+  body {
+    @apply text-base desktop:text-lg w-full h-full;
+  }
 
-    .ha-topnav {
-        @apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1
-    }
+  .ha-topnav {
+    @apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1;
+  }
 
-    .ha-topnav a {
-        @apply hidden text-slate-700 hover:text-slate-900  desktop:inline-block mr-6 2xl:mr-7
-    }
+  .ha-topnav a {
+    @apply hidden text-slate-700 hover:text-slate-900  desktop:inline-block mr-6 2xl:mr-7;
+  }
 
-    .ha-topnav a:last-child {
-        @apply mr-0
-    }
+  .ha-topnav a:last-child {
+    @apply mr-0;
+  }
 
-    .ha-topnav-dropdown {
-        @apply hidden desktop:relative desktop:inline-block
-    }
+  .ha-topnav-dropdown {
+    @apply hidden desktop:relative desktop:inline-block;
+  }
 
-    .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
-        @apply desktop:block
-    }
+  .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+    @apply desktop:block;
+  }
 
-    .ha-topnav-dropdown .ha-topnav-dropdown-content {
-        @apply hidden mr-6 pt-1 right-0 desktop:absolute bg-slate-50 min-w-[130px] shadow-md border-slate-400 border-b z-50
-    }
+  .ha-topnav-dropdown .ha-topnav-dropdown-content {
+    @apply hidden mr-6 pt-1 right-0 desktop:absolute bg-slate-50 min-w-[130px] shadow-md border-slate-400 border-b z-50;
+  }
 
-    .ha-topnav-dropdown .ha-topnav-dropdown-content a {
-        @apply pl-2 pr-3 py-2 block mr-0
-    }
+  .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+    @apply pl-2 pr-3 py-2 block mr-0;
+  }
 
-    .ha-topnav-dropdown .ha-topnav-dropdown-content .active {
-        @apply border-none
-    }
+  .ha-topnav-dropdown .ha-topnav-dropdown-content .active {
+    @apply border-none;
+  }
 
-    .ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
-        @apply bg-slate-100
-    }
+  .ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
+    @apply bg-slate-100;
+  }
 
-    .ha-footer {
-        @apply  bg-slate-50 w-full h-16 mx-auto mt-4 p-4 md:p-4 desktop:p-4 text-lg font-serif text-right
-    }
+  /* Classes for the footer */
+  .ha-footer {
+    @apply font-serif;
+  }
 
-    .ha-footer a {
-        @apply underline decoration-dotted
-    }
+  .ha-footer .ha-footertext {
+    @apply bg-slate-50 p-2 px-4 mx-auto max-w-screen-desktop text-right text-sm;
+  }
 
-    .ha-footer a:hover {
-        @apply underline decoration-solid
-    }
+  .ha-footer a {
+    @apply underline decoration-dotted hover:decoration-solid;
+  }
 
-/* Classes for static pages */
+  .ha-footer .ha-themetoggles {
+    @apply whitespace-nowrap relative bg-slate-200 px-0.5 rounded-3xl h-4 w-[49px] shadow-inner
+  }
 
-    .ha-static {
-        @apply w-full bg-slate-50 py-12 px-12 md:px-16 hyphenate font-serif
-    }
+  .ha-footer .ha-themetoggles * {
+    @apply float-left;
+  }
 
-    .ha-static h1 {
-        @apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6
-    }
+  .ha-footer .ha-themetoggles input[type="radio"] {
+    @apply hidden;
+  }
 
-    .ha-static h2 {
-        @apply my-3 mt-4 text-lg desktop:text-2xl
-    }
+  .ha-footer .ha-themetoggles label {
+    @apply z-10 block w-[11px] h-[11px] my-[3px] mx-[2px] rounded-3xl cursor-pointer text-center
+  }
 
-    .ha-static h3 {
-        @apply mt-4 mb-2 text-hamannHighlight
-    }
+  .ha-footer .ha-themetoggles .ha-themetoggleslider {
+    @apply w-[11px] h-[11px] absolute top-[3px] rounded-3xl transition-all duration-100 ease-in-out shadow-md
+  }
 
-    .ha-static table {
-        @apply my-3 w-full
-    }
+  .ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
+      @apply bg-slate-800  left-1
+  }
 
-    .ha-static table th {
-        @apply pl-2 pr-2 desktop:pr-4 text-left font-normal text-hamannHighlight
-    }
+  .ha-footer .ha-themetoggles #ha-toggletwilight:checked ~ .ha-themetoggleslider {
+      @apply bg-slate-500 left-[19px]
+  }
 
-    .ha-static table tr td {
-        @apply pl-2 pr-2 desktop:pr-4 align-top desktop:whitespace-nowrap
-    }
+  .ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
+      @apply bg-slate-50 left-[34px]
+  }
 
-    .ha-static table tr td:last-child {
-        @apply desktop:whitespace-normal
-    }
+  /* Classes for static pages */
 
-    .ha-static table tr:nth-child(even) {
-        @apply bg-slate-200
-    }
+  .ha-static {
+    @apply w-full bg-slate-50 py-12 px-12 md:px-16 hyphenate font-serif;
+  }
 
-    .ha-static p {
-        @apply my-3
-    }
+  .ha-static h1 {
+    @apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6;
+  }
 
-    .ha-static a {
-        @apply underline decoration-dotted
-    }
+  .ha-static h2 {
+    @apply my-3 mt-4 text-lg desktop:text-2xl;
+  }
 
-    .ha-static a:hover {
-        @apply underline decoration-solid
-    }
+  .ha-static h3 {
+    @apply mt-4 mb-2 text-hamannHighlight;
+  }
 
-    .ha-static .ha-footnote {
-        @apply relative text-sm desktop:text-base
-    }
+  .ha-static table {
+    @apply my-3 w-full;
+  }
 
-    .ha-static .ha-footnote .ha-footnote-ref {
-        @apply inline-block absolute text-right w-8 -left-10
-    }
+  .ha-static table th {
+    @apply pl-2 pr-2 desktop:pr-4 text-left font-normal text-hamannHighlight;
+  }
 
-/* Classes for register pages */
+  .ha-static table tr td {
+    @apply pl-2 pr-2 desktop:pr-4 align-top desktop:whitespace-nowrap;
+  }
 
-    .ha-register {
-        @apply w-full font-serif numeric-mediaeval
-    }
+  .ha-static table tr td:last-child {
+    @apply desktop:whitespace-normal;
+  }
 
-    .ha-register .ha-register-head,
-    .ha-register .ha-register-body {
-        @apply bg-slate-50 pt-9 md:pt-12 px-9 md:px-16
-    }
+  .ha-static table tr:nth-child(even) {
+    @apply bg-slate-200;
+  }
 
-    .ha-register .ha-register-head {
-        @apply border-b-2 border-slate-200  
-    }
+  .ha-static p {
+    @apply my-3;
+  }
 
-    .ha-register .ha-register-head h1 {
-        @apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6
-    }
+  .ha-static a {
+    @apply underline decoration-dotted;
+  }
 
-    .ha-register .ha-register-head .ha-register-nav {
-        @apply font-sans
-    }
+  .ha-static a:hover {
+    @apply underline decoration-solid;
+  }
+
+  .ha-static .ha-footnote {
+    @apply relative text-sm desktop:text-base;
+  }
+
+  .ha-static .ha-footnote .ha-footnote-ref {
+    @apply inline-block absolute text-right w-8 -left-10;
+  }
+
+  /* Classes for register pages */
+
+  .ha-register {
+    @apply w-full font-serif numeric-mediaeval;
+  }
+
+  .ha-register .ha-register-head,
+  .ha-register .ha-register-body {
+    @apply bg-slate-50 pt-9 md:pt-12 px-9 md:px-16;
+  }
+
+  .ha-register .ha-register-head {
+    @apply border-b-2 border-slate-200 rounded-t-sm;
+  }
+
+  .ha-register .ha-register-head h1 {
+    @apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6;
+  }
+
+  .ha-register .ha-register-head .ha-register-nav {
+    @apply font-sans;
+  }
+
+  .ha-register .ha-register-head .ha-register-nav a {
+    @apply inline-block px-1 mr-1 md:mr-3 text-slate-700 hover:text-slate-900;
+  }
+
+  .ha-register .ha-register-head .ha-register-nav a:first {
+    @apply pl-0;
+  }
+
+  .ha-register .ha-register-head .ha-register-nav a.active {
+    @apply border-b-2 border-slate-200;
+  }
+
+  .ha-register .ha-register-head .ha-register-nav .ha-register-left-nav {
+    @apply inline-block;
+  }
+
+  .ha-register .ha-register-head .ha-register-nav .ha-register-right-nav {
+    @apply inline-block;
+  }
+
+  .ha-register .ha-register-body {
+    @apply md:pr-96 pb-9 md:pb-12 rounded-b-sm;
+  }
+
+  .ha-register .ha-register-body .ha-comment {
+    @apply block mb-9 md:mb-12;
+  }
+
+  .ha-register .ha-register-body .ha-comment a {
+    @apply underline decoration-dotted hover:decoration-solid;
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-headcomment {
+    @apply desktop:relative block;
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-subcomment {
+    @apply desktop:relative block ml-8 mt-2;
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead {
+    @apply block;
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-lemma {
+    @apply inline font-bold;
+  }
+
+  .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-comment
+    .ha-commenthead
+    .ha-lemma {
+    @apply inline font-normal;
+  }
+
+  .ha-register .ha-forschung .ha-register-body .ha-comment {
+    @apply mb-4 md:mb-6 -indent-4 pl-4;
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
+    @apply inline-block font-normal text-xs md:text-sm leading-snug font-sans text-slate-600 caps-allpetite ml-2;
+  }
+
+  .ha-register
+    .ha-register-body
+    .ha-comment
+    .ha-commenthead
+    .ha-letlinks
+    .ha-hkb {
+    @apply inline text-slate-900;
+  }
+
+  .ha-register
+    .ha-neuzeit
+    .ha-register-body
+    .ha-headcomment
+    .ha-commenthead
+    .ha-letlinks,
+  .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-headcomment
+    .ha-commenthead
+    .ha-letlinks {
+    @apply desktop:left-[48rem];
+  }
+
+  .ha-register
+    .ha-neuzeit
+    .ha-register-body
+    .ha-subcomment
+    .ha-commenthead
+    .ha-letlinks,
+  .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-subcomment
+    .ha-commenthead
+    .ha-letlinks {
+    @apply desktop:left-[46rem];
+  }
+
+  .ha-register .ha-bibel .ha-register-body .ha-commenthead .ha-lemma a {
+    @apply pl-2;
+  }
+
+  .ha-register .ha-bibel .ha-register-body .ha-commenthead .ha-lemma svg {
+    @apply inline;
+  }
+
+  .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks,
+  .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks {
+    @apply desktop:indent-0 desktop:top-0 desktop:w-80 desktop:block desktop:bg-slate-50 desktop:absolute desktop:border-l-2 desktop:border-t-[3px] desktop:border-t-slate-50 pl-2;
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks a {
+    @apply hover:text-slate-900 no-underline;
+  }
+
+  /* Classes for MetaData View */
+
+  .ha-letterhead {
+    @apply flex flex-row;
+  }
+
+  .ha-letterhead .ha-letternumber {
+    @apply flex text-5xl desktop:font-normal desktop:text-6xl mr-4 desktop:mr-6;
+  }
+
+  .ha-letterhead .ha-letternumber .ha-letternumberinline {
+    @apply inline align-middle leading-none;
+  }
+
+  .ha-letterhead .ha-metadata {
+    @apply flex self-end grow shrink-0;
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadatarows {
+    @apply flex flex-col;
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow {
+    @apply flex flex-row leading-snug;
+  }
+
+  .strikethrough {
+    @apply line-through;
+  }
+
+  .ha-letterhead
+    .ha-metadata
+    .ha-metadatarows
+    .ha-metadataupperrow
+    .ha-metadatadate {
+    @apply flex caps-petite numeric-mediaeval;
+  }
+
+  .ha-letterhead .ha-metadata .ha-tooltip {
+    @apply self-center cursor-default inline-block relative;
+  }
+
+  .ha-letterhead .ha-metadata .ha-tooltiptext {
+    @apply bg-slate-100 rounded text-sm px-1 py-0.5 absolute z-10 text-center shadow;
+  }
+
+  .ha-letterhead .ha-metadata .ha-tooltiptext::after {
+    @apply absolute top-full left-1/2;
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
+    @apply text-xs bg-slate-100 rounded px-2 ml-2 py-[0.1rem] shadow;
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross {
+    @apply relative inline-block;
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before {
+    @apply border-b-2 border-gray-600;
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before,
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::after {
+    @apply w-full h-0 absolute right-0 top-1/2;
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadatarows .hametadatapersons {
+    @apply flex leading-snug;
+  }
+
+  /* Classes for Letter View */
+
+  .ha-letterheader {
+    @apply bg-slate-50 dark:bg-slate-800 dark:text-slate-50 rounded-t-sm pt-8 md:pt-12 px-6 md:px-16 border-slate-200 border-b-2;
+  }
+
+  .ha-letterheader .ha-letterheadernav {
+    @apply mt-9 flex grow;
+  }
 
-    .ha-register .ha-register-head .ha-register-nav a {
-        @apply inline-block px-1 mr-1 md:mr-3 text-slate-700 hover:text-slate-900
-    }
+  .ha-letterheader .ha-lettertabs {
+    @apply flex grow;
+  }
 
-    .ha-register .ha-register-head .ha-register-nav a:first {
-        @apply pl-0 
-    }
+  .ha-letterheader .ha-lettertabs a {
+    @apply inline-block px-1 mr-1 md:mr-3 text-slate-700 hover:text-slate-900 cursor-pointer;
+  }
 
-    .ha-register .ha-register-head .ha-register-nav a.active {
-        @apply border-b-2 border-slate-200
-    }
+  .ha-letterheader .ha-lettertabs .ha-marginalsbtn {
+    @apply md:hidden;
+  }
 
-    .ha-register .ha-register-head .ha-register-nav .ha-register-left-nav {
-        @apply inline-block
-    }
+  .ha-letterheader .ha-lettertabs a.active {
+    @apply pointer-events-none border-b-2 border-slate-200 text-hamannHighlight;
+  }
 
-    .ha-register .ha-register-head .ha-register-nav .ha-register-right-nav {
-        @apply inline-block
-    }
+  .ha-letterheader .ha-lettertabs a:first {
+    @apply pl-0;
+  }
 
-    .ha-register .ha-register-body {
-        @apply md:pr-96 pb-9 md:pb-12
-    }
+  .ha-letterheader .ha-lettermetalinks {
+    @apply self-end border-b-2 border-slate-200;
+  }
 
-    .ha-register .ha-register-body .ha-comment {
-        @apply block mb-9 md:mb-12
-    }
+  .ha-letterheader .ha-lettermetalinks a {
+    @apply self-end caps-petite text-slate-700 hover:text-slate-900;
+  }
 
-    .ha-register .ha-register-body .ha-comment a {
-        @apply underline decoration-dotted hover:decoration-solid
-    }
+  .ha-letterheader .ha-lettermetalinks .ha-hkb {
+    @apply inline-block caps-allpetite;
+  }
+
+  .ha-letterbody {
+    @apply flex flex-row flex-nowrap bg-slate-50 rounded-b-sm;
+  }
+
+  .ha-lettertext {
+    @apply sm:shrink-0 sm:border-l-2 ml-4 sm:ml-12 px-4 pt-4 pb-8 relative font-serif leading-[1.48] bg-slate-50 numeric-mediaeval;
+  }
+
+  .ha-marginals {
+    @apply max-w-3xl ml-4 md:ml-12 px-4 py-4 relative leading-[1.48] bg-slate-50 numeric-mediaeval;
+  }
+
+  .ha-marginals table td {
+    @apply align-text-top;
+  }
+
+  .ha-marginals .ha-marginalfromto {
+    @apply whitespace-nowrap text-sm font-semibold pr-4;
+  }
+
+  .ha-marginals .ha-marginaltext .ha-bzg {
+    @apply inline;
+  }
 
-    .ha-register .ha-register-body .ha-comment .ha-headcomment {
-        @apply desktop:relative block
-    }
+  .ha-marginals .ha-marginaltext a {
+    @apply underline decoration-dotted hover:decoration-solid;
+  }
 
-    .ha-register .ha-register-body .ha-comment .ha-subcomment {
-        @apply desktop:relative block ml-8 mt-2
-    }
+  .ha-additions .ha-tradition div {
+    @apply inline;
+  }
 
-    .ha-register .ha-register-body .ha-comment .ha-commenthead {
-        @apply block
-    }
-
-    .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-lemma {
-        @apply inline font-bold
-    }
-
-    .ha-register .ha-forschung .ha-register-body .ha-comment .ha-commenthead .ha-lemma {
-        @apply inline font-normal 
-    }
-
-    .ha-register .ha-forschung .ha-register-body .ha-comment {
-        @apply mb-4 md:mb-6 -indent-4 pl-4
-    }
-
-    .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
-        @apply inline-block font-normal text-xs md:text-sm leading-snug font-sans text-slate-600 caps-allpetite ml-2
-    }
+  .ha-additions .ha-tradition {
+    @apply max-w-4xl;
+  }
 
-    .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
-        @apply inline text-slate-900
-    }
+  .ha-additions {
+    @apply ml-4 md:ml-12 px-4 pt-4 pb-4 relative font-serif leading-[1.48] bg-slate-50 numeric-mediaeval;
+  }
 
-    .ha-register .ha-neuzeit .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks,
-    .ha-register .ha-forschung .ha-register-body .ha-headcomment .ha-commenthead .ha-letlinks {
-        @apply desktop:left-[48rem]
-    }
+  .ha-additions .ha-app {
+    @apply !block font-bold pt-6;
+  }
 
-    .ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks,
-    .ha-register .ha-forschung .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
-        @apply desktop:left-[46rem]
-    }
+  .ha-additions .ha-app + br {
+    @apply hidden;
+  }
 
-    .ha-register .ha-bibel .ha-register-body .ha-commenthead .ha-lemma a {
-        @apply pl-2
-    }
+  .ha-additions .ha-tradition .ha-app:first-child {
+    @apply pt-0;
+  }
 
-    .ha-register .ha-bibel .ha-register-body .ha-commenthead .ha-lemma svg {
-        @apply inline
-    }
+  .ha-additions .ha-tradition {
+    @apply hyphenate;
+  }
 
-    .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks,
-    .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks {
-        @apply desktop:indent-0 desktop:top-0 desktop:w-80 desktop:block desktop:bg-slate-50 desktop:absolute desktop:border-l-2 desktop:border-t-[3px] desktop:border-t-slate-50 pl-2
-    }
+  .ha-additions .ha-tradition .ha-tradzhtext {
+    @apply !block font-serif relative w-fit -ml-4 pl-4 unhyphenate;
+  }
 
-    .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks a {
-        @apply hover:text-slate-900 no-underline
-    }
+  .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox {
+    @apply absolute -right-[21rem] desktop:-right-[28rem] w-[19rem] desktop:w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans hidden md:flex flex-wrap;
+  }
 
-/* Classes for MetaData View */
+  .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal {
+    @apply inline-block;
+  }
 
-    .ha-letterhead {
-        @apply flex flex-row 
-    }
+  .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox.ha-expanded-box {
+    @apply pb-1;
+  }
 
-    .ha-letterhead .ha-letternumber {
-        @apply flex text-5xl desktop:font-normal desktop:text-6xl mr-4 desktop:mr-6
-    }
+  .ha-additions .ha-tradition a {
+    @apply !underline decoration-dotted hover:decoration-solid text-slate-700 hover:text-slate-900;
+  }
 
-    .ha-letterhead .ha-letternumber .ha-letternumberinline {
-        @apply inline align-middle leading-none
-    }
+  .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal {
+    @apply pr-6;
+  }
 
-    .ha-letterhead .ha-metadata {
-        @apply flex self-end grow shrink-0
-    }
+  .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal a {
+    @apply !underline decoration-dotted hover:decoration-solid text-slate-800 hover:text-slate-900;
+  }
 
-    .ha-letterhead .ha-metadata .ha-metadatarows {
-        @apply flex flex-col
-    }
+  .ha-additions .ha-tradition .ha-tradzhtext .ha-btn-collapsed-box {
+    @apply hidden md:block absolute text-slate-600 hover:text-slate-900 cursor-pointer -right-[0.5rem] desktop:-right-[2.5rem] leading-none mt-[2px];
+  }
 
-    .ha-letterhead .ha-metadata .ha-metadataupperrow {
-        @apply flex flex-row leading-snug
-    }
+  .ha-additions .ha-hands {
+    @apply pt-6;
+  }
 
-    .strikethrough {
-        @apply line-through
-    }
+  .ha-additions .ha-hands .ha-handstitle {
+    @apply font-bold;
+  }
 
-    .ha-letterhead .ha-metadata .ha-metadatarows .ha-metadataupperrow .ha-metadatadate {
-        @apply flex caps-petite numeric-mediaeval
-    }
+  .ha-additions .ha-hands .ha-handentries .ha-handfrom,
+  .ha-additions .ha-hands .ha-handentries .ha-handto {
+    @apply inline text-sm font-semibold whitespace-nowrap;
+  }
+
+  .ha-additions .ha-hands .ha-handentries .ha-handperson {
+    @apply inline pl-4 whitespace-nowrap;
+  }
+
+  .ha-additions .ha-edits .ha-editstitle {
+    @apply font-bold;
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editfromto {
+    @apply whitespace-nowrap;
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editfrom,
+  .ha-additions .ha-edits .ha-editentries .ha-editto {
+    @apply inline text-sm font-semibold whitespace-nowrap;
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreference {
+    @apply whitespace-nowrap;
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreference div {
+    @apply inline;
+  }
 
-    .ha-letterhead .ha-metadata .ha-tooltip {
-        @apply self-center cursor-default inline-block relative
-    }
+  .ha-additions .ha-edits {
+    @apply pt-6 max-w-4xl;
+  }
 
-    .ha-letterhead .ha-metadata .ha-tooltiptext {
-        @apply bg-slate-100 rounded text-sm px-1 py-0.5 absolute z-10 text-center shadow
-    }
+  .ha-additions .ha-edits .ha-editstitle {
+    @apply font-bold;
+  }
 
-    .ha-letterhead .ha-metadata .ha-tooltiptext::after {
-        @apply absolute top-full left-1/2
-    }
+  .ha-additions .ha-edits .ha-editsinfo {
+    @apply pb-4 hyphenate;
+  }
 
-    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
-        @apply text-xs bg-slate-100 rounded px-2 ml-2 py-[0.1rem] shadow
-    }
-    
-    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross {
-        @apply relative inline-block
-    }
-
-    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before {
-        @apply border-b-2 border-gray-600
-    }
-
-    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before,
-    .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::after {
-        @apply w-full h-0 absolute right-0 top-1/2
-    }
+  .ha-additions .ha-edits .ha-editentries tr td {
+    @apply align-text-top;
+  }
 
-    .ha-letterhead .ha-metadata .ha-metadatarows .hametadatapersons {
-        @apply flex leading-snug
-    }
+  .ha-additions .ha-edits .ha-editentries .ha-editreas div {
+    @apply inline font-sans;
+  }
 
+  .ha-additions .ha-edits .ha-editentries table {
+    /* @apply w-full */
+  }
 
-/* Classes for Letter View */
-
-    .ha-letterheader {
-        @apply bg-slate-50 pt-8 md:pt-12 px-6 md:px-16 border-slate-200 border-b-2
-    }
-
-    .ha-letterheader .ha-letterheadernav {
-        @apply mt-9 flex grow
-    }
+  .ha-additions .ha-edits .ha-editentries .ha-editfromto {
+    @apply pr-1 pl-1;
+  }
 
-    .ha-letterheader .ha-lettertabs {
-        @apply flex grow
-    }
+  .ha-additions .ha-edits .ha-editentries .ha-editreference {
+    @apply border-r-2 pl-1 pr-3 text-sm;
+  }
 
-    .ha-letterheader .ha-lettertabs a {
-        @apply inline-block px-1 mr-1 md:mr-3 text-slate-700 hover:text-slate-900 cursor-pointer
-    }
+  .ha-additions .ha-edits .ha-editentries .ha-editreference br {
+    @apply hidden;
+  }
 
-    .ha-letterheader .ha-lettertabs a.active {
-        @apply pointer-events-none border-b-2 border-slate-200 text-hamannHighlight
-    }
+  .ha-additions .ha-edits .ha-editentries .ha-editreas {
+    @apply pl-3 w-full;
+  }
 
-    .ha-letterheader .ha-lettertabs a:first {
-        @apply pl-0 
-    }
+  .ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
+    @apply bg-slate-100;
+  }
 
-    .ha-letterheader .ha-lettermetalinks {
-        @apply self-end border-b-2 border-slate-200
-    }
+  .ha-additions .ha-edits .ha-editentries .ha-editreas .ha-zh * {
+    @apply !font-serif;
+  }
 
-    .ha-letterheader .ha-lettermetalinks a {
-        @apply self-end caps-petite text-slate-700 hover:text-slate-900
-    }
+  .hide {
+    @apply hidden;
+  }
 
-    .ha-letterheader .ha-lettermetalinks .ha-hkb {
-        @apply inline-block caps-allpetite
-    }
+  .ha-lettertext div {
+    @apply inline;
+  }
 
-    .ha-letterbody {
-        @apply flex flex-row flex-nowrap bg-slate-50 pb-8
-    }
-
-    .ha-lettertext {
-        @apply shrink-0 border-l-2 ml-12 px-4 pt-4 relative font-serif leading-[1.48] bg-slate-50 numeric-mediaeval
-    }
-
-    .ha-additions .ha-tradition div {
-        @apply inline
-    }
-
-    .ha-additions .ha-tradition {
-        @apply max-w-3xl
-    }
-
-    .ha-additions {
-        @apply ml-12 px-4 pt-4 relative font-serif leading-[1.48] bg-slate-50 numeric-mediaeval
-    }
-
-    .ha-additions .ha-app {
-        @apply !inline-block font-bold pt-6
-    }
-
-    .ha-additions .ha-tradition .ha-app:first-child {
-        @apply pt-0
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext {
-        @apply !block font-serif relative w-fit -ml-4 pl-4
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-firstline {
-        @apply shadow rounded
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-linecount {
-        @apply absolute -left-[8.6rem] text-right w-32 text-xs oldstyle-nums mt-1 font-sans
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-zhpage,
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-zhline {
-        @apply px-1 pb-1 bg-slate-50 caps-allpetite normal-nums
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-linecount .ha-hiddenlinecount {
-        @apply hidden
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox {
-        @apply absolute -right-[21rem] desktop:-right-[28rem] w-[19rem] desktop:w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans hidden md:flex flex-wrap
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal {
-        @apply inline-block
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox.ha-expanded-box {
-        @apply pb-1
-    }
-
-    .ha-additions .ha-tradition a {
-        @apply !underline decoration-dotted hover:decoration-solid text-slate-700 hover:text-slate-900
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal {
-        @apply pr-6
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-marginalbox .ha-marginal a {
-        @apply !underline decoration-dotted hover:decoration-solid text-slate-800 hover:text-slate-900
-    }
-
-    .ha-additions .ha-tradition .ha-tradzhtext .ha-btn-collapsed-box {
-        @apply  hidden md:block absolute text-slate-600 hover:text-slate-900 cursor-pointer -right-[0.5rem] desktop:-right-[2.5rem] leading-none mt-[2px] 
-    }
-
-    .ha-additions .ha-hands {
-        @apply pt-6
-    }
-
-    .ha-additions .ha-hands .ha-handstitle {
-        @apply font-bold
-    }
-
-    .ha-additions .ha-hands .ha-handentries .ha-handfrom,
-    .ha-additions .ha-hands .ha-handentries .ha-handto {
-        @apply inline text-sm font-semibold whitespace-nowrap
-    }
-
-    .ha-additions .ha-hands .ha-handentries .ha-handperson {
-        @apply inline pl-4 whitespace-nowrap
-    }
-
-    .ha-additions .ha-edits .ha-editstitle {
-        @apply font-bold
-    }
-
-    .ha-additions .ha-edits .ha-editentries .ha-editfromto {
-        @apply whitespace-nowrap
-    }
-
-    .ha-additions .ha-edits .ha-editentries .ha-editfrom,
-    .ha-additions .ha-edits .ha-editentries .ha-editto {
-        @apply inline text-sm font-semibold whitespace-nowrap
-    }
-
-    .ha-additions .ha-edits .ha-editentries .ha-editreference {
-        @apply whitespace-nowrap
-    }
-
-    .ha-additions .ha-edits .ha-editentries .ha-editreference div {
-        @apply inline
-    }
-    
-    .ha-additions .ha-edits {
-        @apply pt-6
-    }
-
-    .ha-additions .ha-edits .ha-editstitle {
-        @apply font-bold
-    }
-
-    .ha-additions .ha-edits .ha-editsinfo {
-        @apply mr-72 pb-4
-    }
-
-    .ha-additions .ha-edits .ha-editentries tr td {
-        @apply align-text-top
-    }
-
-    .ha-additions .ha-edits .ha-editentries .ha-editreas div {
-        @apply inline font-sans
-    }
-
-    .ha-additions .ha-edits .ha-editentries table {
-        /* @apply w-full */
-    }
-
-    .ha-additions .ha-edits .ha-editentries tr td:nth-of-type(1) {
-        @apply pr-1 pl-1 text-right
-    }
-
-    .ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2) {
-        @apply border-r-2 pl-1 pr-3 text-sm
-    }
-
-    .ha-additions .ha-edits .ha-editentries tr td:nth-of-type(3) {
-        @apply pl-3
-    }
-
-    /* .ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
-        @apply bg-slate-200
-    } */
-
-    .ha-additions .ha-edits .ha-editentries .ha-editreas .ha-zh * {
-        @apply !font-serif
-    }
-
-    .hide {
-        @apply hidden
-    }
-
-    .ha-lettertext div {
-        @apply inline
-    }
-
-    .ha-lettertext .ha-linecount .ha-firstline {
-        @apply shadow rounded
-    }
-
-    .ha-lettertext .ha-linecount {
-        @apply absolute -left-[8.6rem] text-right w-32 text-xs oldstyle-nums mt-1 font-sans
-    }
-
-    .ha-lettertext .ha-linecount .ha-zhpage,
-    .ha-lettertext .ha-linecount .ha-zhline {
-        @apply px-1 pb-1 bg-slate-50 caps-allpetite normal-nums
-    }
-
-    .ha-lettertext .ha-linecount .ha-hiddenlinecount {
-        @apply hidden
-    }
-
-    .ha-lettertext .ha-marginalbox {
-        @apply absolute -right-[21rem] desktop:-right-[28rem] w-[19rem] desktop:w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans hidden md:flex flex-wrap
-    }
-
-    .ha-lettertext .ha-marginalbox .ha-marginal {
-        @apply inline-block
-    }
-
-    .ha-lettertext .ha-marginalbox.ha-expanded-box {
-        @apply pb-1
-    }
-
-    .ha-lettertext .ha-marginalbox .ha-marginal {
-        @apply pr-6
-    }
-
-    .ha-lettertext .ha-marginalbox .ha-marginal .ha-text {
-
-    }
-
-    .ha-lettertext .ha-marginalbox .ha-marginal a {
-        @apply !underline decoration-dotted hover:decoration-solid text-slate-800 hover:text-slate-900
-    }
-
-    .ha-lettertext .ha-btn-collapsed-box {
-        @apply hidden md:block absolute text-slate-700 hover:text-slate-900 cursor-pointer -right-[0.5rem] desktop:-right-[2.5rem] leading-none mt-[2px] 
-    }
-
-
-/* Classes from the General parser */
-
-
-/* Classes from .NET */
-
-    .ha-up {
-        @apply -top-3 relative
-    }
-
-    .ha-bzg {
-        @apply !font-serif !text-xs !font-semibold
-    }
-
-    .ha-text {
-        @apply inline
-    }
-
-    .ha-title {
-        @apply inline italic
-    }
-
-    .ha-insertedlemma {
-        @apply inline
-    }
-
-    .ha-serif {
-        @apply font-serif
-    }
-
-    .ha-aq,
-    .ha-aq * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply font-sans
-    }
-
-    .ha-ul,
-    .ha-ul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply underline
-    }
-
-    .ha-del,
-    .ha-del * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply line-through
-    }
-
-    .ha-hand,
-    .ha-hand * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply font-classy text-[0.9rem]
-    }
-
-    .ha-added,
-    .ha-added * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply bg-slate-300 px-1 rounded-sm
-    }
-
-    .ha-note,
-    .ha-note * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply italic text-slate-700
-    }
-
-    .ha-sup {
-        @apply relative -top-[0.3em] text-[80%]
-    }
-
-    /* TODO: Something dooesnt work here */
-    .ha-super {
-        @apply numeric-normal relative text-xs leading-none align-baseline -top-[0.3em]
-    }
-
-    .ha-sub {
-        @apply relative text-xs leading-none align-baseline -bottom-[0.25em]
-    }
-
-    .ha-ful,
-    .ha-ful * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply inline border-b border-black pb-[2px]
-    }
-
-    .ha-dul,
-    .ha-dul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply underline decoration-double
-    }
-
-    .ha-tul,
-    .ha-tul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
-        @apply underline border-b-[3px] border-double border-black
-    }
-
-    .up {
-        @apply relative -top[0.5em]
-    }
-
-    .ha-alignright {
-        @apply absolute right-1
-    }
-
-    .ha-aligncenter {
-        @apply absolute right-0 left-0 whitespace-nowrap min-w-[33%] text-center
-    }
-
-    .ha-lineline {
-        @apply border-t border-black w-1/3 mx-40 mt-[0.6rem] absolute
-    }
-
-    .ha-sal {
-        @apply inline-block ml-6
-    }
-
-/* Classes from Javascript */
-
-    .active {
-        @apply !text-hamannHighlight pointer-events-none
-    }
-
-    .active:hover {
-        @apply text-hamannHighlight
-    }
-
-    .ha-topnav a.active {
-        @apply underline underline-offset-2 desktop:no-underline desktop:border-b-4
-    }
-
-    .ha-topnav.ha-topnav-collapsed {
-        @apply block w-full h-full mt-4 text-base desktop:flex desktop:w-fit desktop:mt-0 md:text-lg 2xl:text-xl
-    }
-
-    .ha-topnav.ha-topnav-collapsed a {
-        @apply block py-1 w-full text-left clear-both desktop:inline-block desktop:py-0 desktop:w-fit
-    }
-
-    
-    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
-        @apply block desktop:inline-block
-    }
-
-    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
-        @apply desktop:block
-    }
-
-    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
-        @apply block shadow-none border-none pt-0 desktop:hidden desktop:shadow-md desktop:border-b desktop:pt-2
-    }
-
-    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
-        @apply py-1 desktop:py-2
-    }
-
-    .ha-register .ha-headcomment .ha-btn-collapsed-box {
-        @apply left-[47.6rem]
-    }
-
-    .ha-register .ha-subcomment .ha-btn-collapsed-box {
-        @apply left-[45.6rem]
-    }
-
-    .ha-register .ha-btn-collapsed-box {
-        @apply hidden desktop:block absolute -top-[0.15rem] text-slate-600 hover:text-slate-900 cursor-pointer
-    }
-
-    .ha-collapsed-box {
-        @apply z-0 overflow-hidden
-    }
-
-    .ha-expanded-box {
-        @apply shadow-md z-[1000] !h-auto !max-h-screen
-    }
-
-    /* .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-collapsed-box:hover,
+  .ha-linecount.ha-firstline {
+    @apply hidden sm:inline-block sm:bg-slate-100 shadow rounded px-1 sm:pb-1 caps-allpetite normal-nums sm:max-w-[5rem] whitespace-nowrap sm:-left-[4rem] desktop:-left-[5.5rem]
+  }
+
+  .ha-linecount {
+    @apply sm:absolute sm:-left-[8.6rem] sm:text-right sm:w-32 text-xs sm:mt-1 font-sans select-none
+  }
+
+  .ha-linecount .ha-zhline {
+    @apply hidden sm:inline;
+  }
+
+  .ha-linecount .ha-zhpage {
+    @apply inline-block sm:inline;
+  }
+
+  .ha-linecount .ha-zhpage,
+  .ha-linecount .ha-zhline {
+    @apply px-1 sm:pb-1 sm:bg-slate-50 caps-allpetite normal-nums
+  }
+
+  .ha-linecount .ha-hiddenlinecount {
+    @apply !hidden;
+  }
+
+  .ha-lettertext .ha-marginalbox {
+    @apply absolute -right-[21rem] desktop:-right-[28rem] w-[19rem] desktop:w-[24rem] text-sm border-l-2 border-slate-300 leading-tight pl-2 bg-slate-50 mr-4 pr-1 hyphenate mt-1 rounded-sm font-sans hidden md:flex flex-wrap;
+  }
+
+  .ha-lettertext .ha-marginalbox .ha-marginal {
+    @apply inline-block;
+  }
+
+  .ha-lettertext .ha-marginalbox.ha-expanded-box {
+    @apply pb-1;
+  }
+
+  .ha-lettertext .ha-marginalbox .ha-marginal {
+    @apply pr-6;
+  }
+
+  .ha-lettertext .ha-marginalbox .ha-marginal .ha-text {
+
+  }
+
+  .ha-lettertext .ha-marginalbox .ha-marginal a {
+    @apply !underline decoration-dotted hover:decoration-solid text-slate-800 hover:text-slate-900;
+  }
+
+  .ha-lettertext .ha-btn-collapsed-box {
+    @apply hidden md:block absolute text-slate-700 hover:text-slate-900 cursor-pointer -right-[0.5rem] desktop:-right-[2.5rem] leading-none mt-[2px];
+  }
+
+  /* Classes from the General parser */
+
+  /* Classes from .NET */
+  .ha-zhbreak {
+    @apply hidden sm:inline;
+  }
+
+  .ha-up {
+    @apply -top-3 relative;
+  }
+
+  .ha-bzg {
+    @apply !font-serif !text-xs !font-semibold;
+  }
+
+  .ha-text {
+    @apply inline;
+  }
+
+  .ha-title {
+    @apply inline italic;
+  }
+
+  .ha-insertedlemma {
+    @apply inline;
+  }
+
+  .ha-serif {
+    @apply font-serif;
+  }
+
+  .ha-aq,
+  .ha-aq * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply font-sans;
+  }
+
+  .ha-ul,
+  .ha-ul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply underline;
+  }
+
+  .ha-del,
+  .ha-del * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply line-through;
+  }
+
+  .ha-hand,
+  .ha-hand
+    *
+    :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply font-classy text-[0.9rem];
+  }
+
+  .ha-added,
+  .ha-added
+    *
+    :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply bg-slate-300 px-1 rounded-sm;
+  }
+
+  .ha-note,
+  .ha-note
+    *
+    :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply italic text-slate-700;
+  }
+
+  .ha-sup {
+    @apply relative -top-[0.3em] text-[80%];
+  }
+
+  /* TODO: Something dooesnt work here */
+  .ha-super {
+    @apply numeric-normal relative text-xs leading-none align-baseline -top-[0.3em];
+  }
+
+  .ha-sub {
+    @apply relative text-xs leading-none align-baseline -bottom-[0.25em];
+  }
+
+  .ha-ful,
+  .ha-ful * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply inline border-b border-black pb-[2px];
+  }
+
+  .ha-dul,
+  .ha-dul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply underline decoration-double;
+  }
+
+  .ha-tul,
+  .ha-tul * :not(.ha-linecount *, .ha-linecount, .ha-marginal *, .ha-marginal) {
+    @apply underline border-b-[3px] border-double border-black;
+  }
+
+  .up {
+    @apply relative -top[0.5em];
+  }
+
+  .ha-alignright {
+    @apply float-right;
+  }
+
+  .ha-aligncenter {
+    @apply absolute left-1/2 whitespace-nowrap -translate-x-1/2;
+  }
+
+  .ha-lineline {
+    @apply border-t border-black w-1/3 mx-40 mt-[0.6rem] absolute;
+  }
+
+  .ha-sal {
+    @apply inline-block ml-6;
+  }
+
+  /* Classes for indents */
+  .ha-indent-1 {
+    @apply pl-2 sm:pl-4;
+  }
+
+  .ha-indent-2 {
+    @apply pl-4 sm:pl-8;
+  }
+
+  .ha-indent-3 {
+    @apply pl-6 sm:pl-12;
+  }
+
+  .ha-indent-4 {
+    @apply pl-8 sm:pl-16;
+  }
+
+  .ha-indent-5 {
+    @apply pl-10 sm:pl-20;
+  }
+
+  .ha-indent-6 {
+    @apply pl-20 sm:pl-44;
+  }
+
+  .ha-indent-7 {
+    @apply pl-32 sm:pl-64;
+  }
+
+  /* Classes from Javascript */
+
+  .active {
+    @apply !text-hamannHighlight pointer-events-none;
+  }
+
+  .active:hover {
+    @apply text-hamannHighlight;
+  }
+
+  .ha-topnav a.active {
+    @apply underline underline-offset-2 desktop:no-underline desktop:border-b-4;
+  }
+
+  .ha-topnav.ha-topnav-collapsed {
+    @apply block w-full h-full mt-4 text-base desktop:flex desktop:w-fit desktop:mt-0 md:text-lg 2xl:text-xl;
+  }
+
+  .ha-topnav.ha-topnav-collapsed a {
+    @apply block py-1 w-full text-left clear-both desktop:inline-block desktop:py-0 desktop:w-fit;
+  }
+
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
+    @apply block desktop:inline-block;
+  }
+
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown:hover
+    .ha-topnav-dropdown-content {
+    @apply desktop:block;
+  }
+
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content {
+    @apply block shadow-none border-none pt-0 desktop:hidden desktop:shadow-md desktop:border-b desktop:pt-2;
+  }
+
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content
+    a {
+    @apply py-1 desktop:py-2;
+  }
+
+  .ha-register .ha-headcomment .ha-btn-collapsed-box {
+    @apply left-[47.6rem];
+  }
+
+  .ha-register .ha-subcomment .ha-btn-collapsed-box {
+    @apply left-[45.6rem];
+  }
+
+  .ha-register .ha-btn-collapsed-box {
+    @apply hidden desktop:block absolute -top-[0.15rem] text-slate-600 hover:text-slate-900 cursor-pointer;
+  }
+
+  .ha-collapsed-box {
+    @apply z-0 overflow-hidden;
+  }
+
+  .ha-expanded-box {
+    @apply shadow-md z-[1000] !h-auto !max-h-screen;
+  }
+
+  /* .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-collapsed-box:hover,
     .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-collapsed-box:hover {
         @apply shadow-md z-[1000] !h-auto
     } */
 }
 
 .ha-lettertext .ha-marginalbox .ha-marginal::after {
-    content: '';
+  content: "";
 }
 
 .ha-lettertext .ha-marginalbox .ha-marginal:last-of-type::after {
-    content: '';
+  content: "";
 }
 
 .ha-nr::before {
-    content: ' \200E\25E6';
+  content: " \200E\25E6";
 }
 
 .ha-nr::after {
-    content: ' \200E\25E6';
+  content: " \200E\25E6";
 }
 
 .ha-added::before {
-    content: '';
+  content: "";
 }
 
 .ha-added::after {
-    content: '';
+  content: "";
 }
 
 .ha-note::before {
-    content: '';
+  content: "";
 }
 
 .ha-note::after {
-    content: '';
+  content: "";
 }
 
 .ha-bzg::after {
-    content: ']';
+  content: "]";
 }
 
 .ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2)::after {
-    content:  ']';
+  content: "";
 }
 
 * {
-    text-decoration-skip-ink: all;
+  text-decoration-skip-ink: all;
 }
 
 body {
-    background-image:url('../img/subtlenet2.png');
-    background-repeat:repeat;
+  background-image: url("../img/subtlenet2.png");
+  background-repeat: repeat;
 }
 
 /* ul {
@@ -850,743 +985,699 @@ body {
 } */
 
 .diagdel {
-    text-decoration: none;
-    position: relative;
-    display: inline-block;
+  text-decoration: none;
+  position: relative;
+  display: inline-block;
 }
 
-.diagdel::before, .diagdel::after {
-    content: '';
-    width: 100%;
-    height: 0%;
-    position: absolute;
-    right: 0;
-    bottom: 1.5ex;
+.diagdel::before,
+.diagdel::after {
+  content: "";
+  width: 100%;
+  height: 0%;
+  position: absolute;
+  right: 0;
+  bottom: 1.5ex;
 }
 
 .diagdel::before {
-    border-bottom: 1px solid black;
-    -webkit-transform: skewY(-36deg);
-    transform: skewY(-36deg);
+  border-bottom: 1px solid black;
+  -webkit-transform: skewY(-36deg);
+  transform: skewY(-36deg);
 }
 
-
 .del .del,
 .del .del * {
-    -moz-text-decoration-style: double;
-    -webkit-text-decoration-style: double !important;
-    text-decoration-thickness: 1px;
-    text-decoration-style: double;
+  -moz-text-decoration-style: double;
+  -webkit-text-decoration-style: double !important;
+  text-decoration-thickness: 1px;
+  text-decoration-style: double;
 }
 
 .del .del .ul,
-.ul .del .del, 
+.ul .del .del,
 .del .ul .del {
-    text-decoration: line-through underline;
-    -moz-text-decoration-style: double;
-    -webkit-text-decoration-style: double !important;
-    text-decoration-thickness: 1px;
-    text-decoration-style: double;
+  text-decoration: line-through underline;
+  -moz-text-decoration-style: double;
+  -webkit-text-decoration-style: double !important;
+  text-decoration-thickness: 1px;
+  text-decoration-style: double;
 }
 
 .del .ul,
 .ul .del {
-    text-decoration: line-through underline;
-    text-decoration-thickness: 1px;
-    text-decoration-skip-ink: auto;
-    -webkit-text-decoration-skip-ink: auto;
+  text-decoration: line-through underline;
+  text-decoration-thickness: 1px;
+  text-decoration-skip-ink: auto;
+  -webkit-text-decoration-skip-ink: auto;
 }
 
 .downshadow-sm {
-    -webkit-box-shadow: 5px 6px 5px -7px rgba(0,0,0,0.79);
-    box-shadow: 5px 6px 5px -7px rgba(0,0,0,0.79);
+  -webkit-box-shadow: 5px 6px 5px -7px rgba(0, 0, 0, 0.79);
+  box-shadow: 5px 6px 5px -7px rgba(0, 0, 0, 0.79);
 }
 
 .hyphenate {
-    hyphens: auto;
+  hyphens: auto;
 }
 
 .unhyphenate {
-    hyphens: none;
+  hyphens: none;
 }
 
 .numeric-mediaeval {
-    font-variant-numeric: oldstyle-nums;
+  font-variant-numeric: oldstyle-nums;
 }
 
 .numeric-normal {
-    font-variant-numeric: normal;
+  font-variant-numeric: normal;
 }
 
 .caps-allpetite {
-    font-variant-caps: all-petite-caps;
+  font-variant-caps: all-petite-caps;
 }
 
 .caps-petite {
-    font-variant-caps: petite-caps;
+  font-variant-caps: petite-caps;
 }
 
 .caps-normal {
-    font-variant-caps: normal;
+  font-variant-caps: normal;
 }
 
 .break-inside-avoid {
-    break-inside: avoid;
+  break-inside: avoid;
 }
 
 .ha-menu-arrowsymbol::after {
-    display: inline-block;
-    margin-left: 0.2em;
-    vertical-align: 0.2em;
-    content: "";
-    border-top: 0.3em solid;
-    border-right: 0.3em solid transparent;
-    border-bottom: 0;
-    border-left: 0.3em solid transparent;
+  display: inline-block;
+  margin-left: 0.2em;
+  vertical-align: 0.2em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
 }
 
 .ha-menusymbol {
-    background:var(--white);
-    border-radius:4px;
+  background: var(--white);
+  border-radius: 4px;
 }
 
 .ha-menusymbol svg {
-    width:24px;
-    height:24px;
-    stroke:#000000;
-    stroke-width:2;
-    stroke-linecap:round;
-    stroke-linejoin:miter;
-    fill:none;
-    color:#000000;
+  width: 24px;
+  height: 24px;
+  stroke: #000000;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: miter;
+  fill: none;
+  color: #000000;
 }
 
 .ha-tooltip .ha-tooltiptext {
-    white-space: nowrap;
-    visibility: hidden;
-    min-width: 160px;
-    bottom: 155%;
-    left: 50%;
-    margin-left: -80px;
-    opacity: 0;
-    transition: opacity 0.3s;
-  }
-  
-  .ha-tooltip .ha-tooltiptext::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent transparent;
-  }
-  
-  .ha-tooltip:hover .ha-tooltiptext {
-    visibility: visible;
-    opacity: 1;
-  }
-  
+  white-space: nowrap;
+  visibility: hidden;
+  min-width: 160px;
+  bottom: 155%;
+  left: 50%;
+  margin-left: -80px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
 
+.ha-tooltip .ha-tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent
+    transparent;
+}
+
+.ha-tooltip:hover .ha-tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
 
 .ha-open-btn-collapsed-box::before {
-    content: '\200E+';
-    font-weight: 900;
+  content: "\200E+";
+  font-weight: 900;
 }
 
 .ha-close-btn-collapsed-box::before {
-    content: '\200E\00D7';
-    font-weight: 900;
+  content: "\200E\00D7";
+  font-weight: 900;
 }
 
-/* Classes for indents */
-.ha-indent-1 {
-    padding-left: 1rem;
-    background-color: var(--hamannWeiss);
+.ha-text {
+    user-select: contain;
 }
-
-.ha-indent-2 {
-    padding-left: 2rem;
-    background-color: var(--hamannWeiss);
-}
-
-.ha-indent-3 {
-    padding-left: 3rem;
-    background-color: var(--hamannWeiss);
-}
-
-.ha-indent-4 {
-    padding-left: 4rem;
-    background-color: var(--hamannWeiss);
-}
-
-.ha-indent-5 {
-    padding-left: 5rem;
-    background-color: var(--hamannWeiss);
-}
-
-.ha-indent-6 {
-    padding-left: 11rem;
-    background-color: var(--hamannWeiss);
-}
-
-.ha-indent-7 {
-    padding-left: 16rem;
-    background-color: var(--hamannWeiss);
-}
-
 /* Classes for tables */
 .ha-table {
-    overflow: hidden;
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums !important;
+  overflow: hidden;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums !important;
 }
 
 .ha-hatab-0-2 {
-    display: inline;
-    position: static;
-    min-width: 50%;
+  display: inline;
+  position: static;
+  min-width: 50%;
 }
 
 .ha-hatab-1-2 {
-    display: inline-block;
-    position: absolute;
-    left: 50%;
-    min-width: 50%;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  min-width: 50%;
 }
 
 .ha-hatab-0-3 {
-    display: inline;
-    position: static;
-    min-width: 33.333%;
+  display: inline;
+  position: static;
+  min-width: 33.333%;
 }
 
 .ha-hatab-1-3 {
-    display: inline-block;
-    position: absolute;
-    left: 33%;
-    min-width: 33.333%;
+  display: inline-block;
+  position: absolute;
+  left: 33%;
+  min-width: 33.333%;
 }
 
 .ha-hatab-2-3 {
-    display: inline-block;
-    position: absolute;
-    left: 66%;
-    min-width: 33.333%;
+  display: inline-block;
+  position: absolute;
+  left: 66%;
+  min-width: 33.333%;
 }
 
 .ha-hatab-0-4 {
-    display: inline;
-    position: static;
-    min-width: 25%;
+  display: inline;
+  position: static;
+  min-width: 25%;
 }
 
 .ha-hatab-1-4 {
-    display: inline-block;
-    position: absolute;
-    left: 25%;
-    min-width: 25%;
+  display: inline-block;
+  position: absolute;
+  left: 25%;
+  min-width: 25%;
 }
 
 .ha-hatab-2-4 {
-    display: inline-block;
-    position: absolute;
-    left: 50%;
-    min-width: 25%;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  min-width: 25%;
 }
 
 .ha-hatab-3-4 {
-    display: inline-block;
-    position: absolute;
-    left: 75%;
-    min-width: 25%;
+  display: inline-block;
+  position: absolute;
+  left: 75%;
+  min-width: 25%;
 }
 
 .ha-hatab-0-5 {
-    display: inline;
-    position: static;
-    min-width: 20%;
+  display: inline;
+  position: static;
+  min-width: 20%;
 }
 
 .ha-hatab-1-5 {
-    display: inline-block;
-    position: absolute;
-    left: 20%;
-    min-width: 20%;
+  display: inline-block;
+  position: absolute;
+  left: 20%;
+  min-width: 20%;
 }
 
 .ha-hatab-2-5 {
-    display: inline-block;
-    position: absolute;
-    left: 40%;
-    min-width: 20%;
+  display: inline-block;
+  position: absolute;
+  left: 40%;
+  min-width: 20%;
 }
 
 .ha-hatab-3-5 {
-    display: inline-block;
-    position: absolute;
-    left: 60%;
-    min-width: 20%;
+  display: inline-block;
+  position: absolute;
+  left: 60%;
+  min-width: 20%;
 }
 
 .ha-hatab-4-5 {
-    display: inline-block;
-    position: absolute;
-    left: 80%;
-    min-width: 20%;
+  display: inline-block;
+  position: absolute;
+  left: 80%;
+  min-width: 20%;
 }
 
 .ha-hatab-0-6 {
-    display: inline;
-    position: static;
-    min-width: 16.667%;
+  display: inline;
+  position: static;
+  min-width: 16.667%;
 }
 
 .ha-hatab-1-6 {
-    display: inline-block;
-    position: absolute;
-    left: 16.667%;
-    min-width: 16.667%;
+  display: inline-block;
+  position: absolute;
+  left: 16.667%;
+  min-width: 16.667%;
 }
 
 .ha-hatab-2-6 {
-    display: inline-block;
-    position: absolute;
-    left: 33.333%;
-    min-width: 16.667%;
+  display: inline-block;
+  position: absolute;
+  left: 33.333%;
+  min-width: 16.667%;
 }
 
 .ha-hatab-3-6 {
-    display: inline-block;
-    position: absolute;
-    left: 50%;
-    min-width: 16.667%;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  min-width: 16.667%;
 }
 
 .ha-hatab-4-6 {
-    display: inline-block;
-    position: absolute;
-    left: 66.667%;
-    min-width: 16.667%;
+  display: inline-block;
+  position: absolute;
+  left: 66.667%;
+  min-width: 16.667%;
 }
 
 .ha-hatab-5-6 {
-    display: inline-block;
-    position: absolute;
-    left: 83.333%;
-    min-width: 16.667%;
+  display: inline-block;
+  position: absolute;
+  left: 83.333%;
+  min-width: 16.667%;
 }
 
 .ha-hatab-0-7 {
-    display: inline;
-    position: static;
-    min-width: 14.286%;
+  display: inline;
+  position: static;
+  min-width: 14.286%;
 }
 
 .ha-hatab-1-7 {
-    display: inline-block;
-    position: absolute;
-    left: 14.286%;
-    min-width: 14.286%;
+  display: inline-block;
+  position: absolute;
+  left: 14.286%;
+  min-width: 14.286%;
 }
 
 .ha-hatab-2-7 {
-    display: inline-block;
-    position: absolute;
-    left: 28.571%;
-    min-width: 14.286%;
+  display: inline-block;
+  position: absolute;
+  left: 28.571%;
+  min-width: 14.286%;
 }
 
 .ha-hatab-3-7 {
-    display: inline-block;
-    position: absolute;
-    left: 42.857%;
-    min-width: 14.286%;
+  display: inline-block;
+  position: absolute;
+  left: 42.857%;
+  min-width: 14.286%;
 }
 
 .ha-hatab-4-7 {
-    display: inline-block;
-    position: absolute;
-    left: 57.143%;
-    min-width: 14.286%;
+  display: inline-block;
+  position: absolute;
+  left: 57.143%;
+  min-width: 14.286%;
 }
 
 .ha-hatab-5-7 {
-    display: inline-block;
-    position: absolute;
-    left: 71.429%;
-    min-width: 14.286%;
+  display: inline-block;
+  position: absolute;
+  left: 71.429%;
+  min-width: 14.286%;
 }
 
 .ha-hatab-6-7 {
-    display: inline-block;
-    position: absolute;
-    left: 85.714%;
-    min-width: 14.286%;
+  display: inline-block;
+  position: absolute;
+  left: 85.714%;
+  min-width: 14.286%;
 }
 
 .ha-hatab-0-8 {
-    display: inline;
-    position: static;
-    min-width: 12.5%;
+  display: inline;
+  position: static;
+  min-width: 12.5%;
 }
 
 .ha-hatab-1-8 {
-    display: inline-block;
-    position: absolute;
-    left: 12.5%;
-    min-width: 12.5%;
+  display: inline-block;
+  position: absolute;
+  left: 12.5%;
+  min-width: 12.5%;
 }
 
 .ha-hatab-2-8 {
-    display: inline-block;
-    position: absolute;
-    left: 25%;
-    min-width: 12.5%;
+  display: inline-block;
+  position: absolute;
+  left: 25%;
+  min-width: 12.5%;
 }
 
 .ha-hatab-3-8 {
-    display: inline-block;
-    position: absolute;
-    left: 37.5%;
-    min-width: 12.5%;
+  display: inline-block;
+  position: absolute;
+  left: 37.5%;
+  min-width: 12.5%;
 }
 
 .ha-hatab-4-8 {
-    display: inline-block;
-    position: absolute;
-    left: 50%;
-    min-width: 12.5%;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  min-width: 12.5%;
 }
 
 .ha-hatab-5-8 {
-    display: inline-block;
-    position: absolute;
-    left: 62.5%;
-    min-width: 12.5%;
+  display: inline-block;
+  position: absolute;
+  left: 62.5%;
+  min-width: 12.5%;
 }
 
 .ha-hatab-6-8 {
-    display: inline-block;
-    position: absolute;
-    left: 75%;
-    min-width: 12.5%;
+  display: inline-block;
+  position: absolute;
+  left: 75%;
+  min-width: 12.5%;
 }
 
 .ha-hatab-7-8 {
-    display: inline-block;
-    position: absolute;
-    left: 87.5%;
-    min-width: 12.5%;
+  display: inline-block;
+  position: absolute;
+  left: 87.5%;
+  min-width: 12.5%;
 }
 
 .ha-hatab-0-9 {
-    display: inline;
-    position: static;
-    min-width: 11.111%;
+  display: inline;
+  position: static;
+  min-width: 11.111%;
 }
 
 .ha-hatab-1-9 {
-    display: inline-block;
-    position: absolute;
-    left: 11.111%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 11.111%;
+  min-width: 11.111%;
 }
 
 .ha-hatab-2-9 {
-    display: inline-block;
-    position: absolute;
-    left: 22.222%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 22.222%;
+  min-width: 11.111%;
 }
 
 .ha-hatab-3-9 {
-    display: inline-block;
-    position: absolute;
-    left: 33.333%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 33.333%;
+  min-width: 11.111%;
 }
 
 .ha-hatab-4-9 {
-    display: inline-block;
-    position: absolute;
-    left: 44.444%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 44.444%;
+  min-width: 11.111%;
 }
 
 .ha-hatab-5-9 {
-    display: inline-block;
-    position: absolute;
-    left: 55.555%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 55.555%;
+  min-width: 11.111%;
 }
 
 .ha-hatab-6-9 {
-    display: inline-block;
-    position: absolute;
-    left: 66.666%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 66.666%;
+  min-width: 11.111%;
 }
 
 .ha-hatab-7-9 {
-    display: inline-block;
-    position: absolute;
-    left: 77.777%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 77.777%;
+  min-width: 11.111%;
 }
 
 .ha-hatab-8-9 {
-    display: inline-block;
-    position: absolute;
-    left: 88.888%;
-    min-width: 11.111%;
+  display: inline-block;
+  position: absolute;
+  left: 88.888%;
+  min-width: 11.111%;
 }
 
-
 .ha-hatab-0-10 {
-    display: inline-block;
-    position: absolute;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  min-width: 10%;
 }
 
 .ha-hatab-1-10 {
-    display: inline-block;
-    position: absolute;
-    left: 10%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 10%;
+  min-width: 10%;
 }
 
 .ha-hatab-2-10 {
-    display: inline-block;
-    position: absolute;
-    left: 20%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 20%;
+  min-width: 10%;
 }
 
 .ha-hatab-3-10 {
-    display: inline-block;
-    position: absolute;
-    left: 30%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 30%;
+  min-width: 10%;
 }
 
 .ha-hatab-4-10 {
-    display: inline-block;
-    position: absolute;
-    left: 40%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 40%;
+  min-width: 10%;
 }
 
 .ha-hatab-5-10 {
-    display: inline-block;
-    position: absolute;
-    left: 50%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  min-width: 10%;
 }
 
 .ha-hatab-6-10 {
-    display: inline-block;
-    position: absolute;
-    left: 60%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 60%;
+  min-width: 10%;
 }
 
 .ha-hatab-7-10 {
-    display: inline-block;
-    position: absolute;
-    left: 70%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 70%;
+  min-width: 10%;
 }
 
 .ha-hatab-8-10 {
-    display: inline-block;
-    position: absolute;
-    left: 80%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 80%;
+  min-width: 10%;
 }
 
 .ha-hatab-9-10 {
-    display: inline-block;
-    position: absolute;
-    left: 90%;
-    min-width: 10%;
+  display: inline-block;
+  position: absolute;
+  left: 90%;
+  min-width: 10%;
 }
 
 .ha-hatab-0-11 {
-    display: inline-block;
-    position: absolute;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  min-width: 9.091%;
 }
 
 .ha-hatab-1-11 {
-    display: inline-block;
-    position: absolute;
-    left: 9.091%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 9.091%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-2-11 {
-    display: inline-block;
-    position: absolute;
-    left: 18.182%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 18.182%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-3-11 {
-    display: inline-block;
-    position: absolute;
-    left: 27.273%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 27.273%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-4-11 {
-    display: inline-block;
-    position: absolute;
-    left: 36.364%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 36.364%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-5-11 {
-    display: inline-block;
-    position: absolute;
-    left: 45.455%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 45.455%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-6-11 {
-    display: inline-block;
-    position: absolute;
-    left: 54.545%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 54.545%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-7-11 {
-    display: inline-block;
-    position: absolute;
-    left: 63.636%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 63.636%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-8-11 {
-    display: inline-block;
-    position: absolute;
-    left: 72.727%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 72.727%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-9-11 {
-    display: inline-block;
-    position: absolute;
-    left: 81.818%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 81.818%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-10-11 {
-    display: inline-block;
-    position: absolute;
-    left: 90.909%;
-    min-width: 9.091%;
+  display: inline-block;
+  position: absolute;
+  left: 90.909%;
+  min-width: 9.091%;
 }
 
 .ha-hatab-0-12 {
-    display: inline-block;
-    position: absolute;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  min-width: 8.333%;
 }
 
 .ha-hatab-1-12 {
-    display: inline-block;
-    position: absolute;
-    left: 8.333%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 8.333%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-2-12 {
-    display: inline-block;
-    position: absolute;
-    left: 16.666%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 16.666%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-3-12 {
-    display: inline-block;
-    position: absolute;
-    left: 25%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 25%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-4-12 {
-    display: inline-block;
-    position: absolute;
-    left: 33.333%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 33.333%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-5-12 {
-    display: inline-block;
-    position: absolute;
-    left: 41.666%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 41.666%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-6-12 {
-    display: inline-block;
-    position: absolute;
-    left: 50%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-7-12 {
-    display: inline-block;
-    position: absolute;
-    left: 58.333%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 58.333%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-8-12 {
-    display: inline-block;
-    position: absolute;
-    left: 66.666%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 66.666%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-9-12 {
-    display: inline-block;
-    position: absolute;
-    left: 75%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 75%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-10-12 {
-    display: inline-block;
-    position: absolute;
-    left: 83.333%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 83.333%;
+  min-width: 8.333%;
 }
 
 .ha-hatab-11-12 {
-    display: inline-block;
-    position: absolute;
-    left: 91.666%;
-    min-width: 8.333%;
+  display: inline-block;
+  position: absolute;
+  left: 91.666%;
+  min-width: 8.333%;
 }
 
+.ha-cross::before,
+.ha-cross::after {
+  content: "";
+}
 
-.ha-cross::before, .ha-cross::after {
-    content: '';
-  }
-
-  .ha-cross::before {
-    -webkit-transform: skewY(-27deg);
-    transform: skewY(-27deg);
-  }
-
-
-/* Not possible otherwise, overwrites javascript set style values, which cant be defined before render */
-/* @media (max-width: 1190px) {
-    .ha-register .ha-neuzeit .ha-register-body .ha-subcomment .ha-commenthead .ha-letlinks {
-        height: auto !important;
-        overflow: unset !important;
-    }
-} */
\ No newline at end of file
+.ha-cross::before {
+  -webkit-transform: skewY(-27deg);
+  transform: skewY(-27deg);
+}
\ No newline at end of file
diff --git a/HaWeb/wwwroot/js/site.js b/HaWeb/wwwroot/js/site.js
index 08405f9..649da02 100644
--- a/HaWeb/wwwroot/js/site.js
+++ b/HaWeb/wwwroot/js/site.js
@@ -121,9 +121,6 @@ const addbuttoncaollapsebox = function (element, height, hoverfunction) {
       }
     });
   }
-
-  //element.appendChild(btn);
-  //element.insertBefore(btn, element.firstChild);
   element.parentNode.insertBefore(btn, element);
 };
 
@@ -155,41 +152,101 @@ const overlappingcollapsebox = function (selector, hoverfunction) {
   }
 };
 
-const showhidebutton = function (buttonid, prevbuttonid, hideid, showid, starthidden) {
+/* Button to hide / show traditions, marginals and the text of the letter */
+const showhidebutton = function (
+  buttonid,
+  divid,
+  buttonlist,
+  divlist,
+  starthidden
+) {
   let button = document.getElementById(buttonid);
-  let prevbtn = document.getElementById(prevbuttonid);
-  if (starthidden) {
-    let hiddenelement = document.getElementById(hideid);
-      let shownelement = document.getElementById(showid);
-      if (hiddenelement !== null) {
-        hiddenelement.classList.add("hide");
-      }
-      if (shownelement !== null) {
-        shownelement.classList.remove("hide");
-      }
-      prevbtn.classList.remove("active");
-      button.classList.add("active");
+  let div = document.getElementById(divid);
+
+  if (starthidden && div !== null) {
+    div.classList.add("hide");
   }
-  if(button !== null) {
-    button.addEventListener("click", function() {
-      let hiddenelement = document.getElementById(hideid);
-      let shownelement = document.getElementById(showid);
-      if (hiddenelement !== null) {
-        hiddenelement.classList.add("hide");
-      }
-      if (shownelement !== null) {
-        shownelement.classList.remove("hide");
-      }
-      prevbtn.classList.remove("active");
-      button.classList.add("active");
-    })
+
+  if (!starthidden && button !== null) {
+    button.classList.add("active");
   }
+
+  if (button !== null) {
+    button.addEventListener("click", function () {
+      for (let btn of buttonlist) {
+        let inactivebutton = document.getElementById(btn);
+        if (inactivebutton !== null) inactivebutton.classList.remove("active");
+      }
+
+      for (let element of divlist) {
+        let hiddenelement = document.getElementById(element);
+        if (hiddenelement !== null) hiddenelement.classList.add("hide");
+      }
+
+      if (button !== null) button.classList.add("active");
+      if (div !== null) div.classList.remove("hide");
+    });
+  }
+};
+
+// Functions for switching theme
+const go_to_dark = function() {
+  localStorage.setItem('theme', 'ha-toggledark');
+  document.documentElement.classList.add('dark');
 }
 
+const go_to_twilight = function() {
+  document.documentElement.classList.remove('dark')
+  let elements = document.getElementsByClassName("ha-twilighttogglebar");
+  for (let el of elements) {
+    el.classList.add("dark");
+  }
+  localStorage.setItem('theme', 'ha-toggletwilight');
+}
+
+const go_to_bright = function() {
+  document.documentElement.classList.remove('dark');
+  let elements = document.getElementsByClassName("ha-twilighttogglebar");
+  for (let el of elements) {
+    el.classList.remove("dark");
+  }
+  localStorage.setItem('theme', 'ha-togglebright');
+}
+
+// Functions for reading theme settings
+const get_theme_settings = function(standard) {
+  var theme = localStorage.getItem('theme');
+  if (theme === null) theme = standard;
+  let toggleSwitch = document.getElementById(theme).click();
+}
+
+const collapseboxes = function() {
+  for (entry of this.document.getElementsByClassName("ha-letlinks")) {
+    entry.maxHeight = "auto";
+    let btns = entry.parentNode.getElementsByClassName("ha-btn-collapsed-box");
+    for (btn of btns) {
+      btn.remove();
+    }
+  }
+
+  for (entry of this.document.getElementsByClassName("ha-marginalbox")) {
+    entry.maxHeight = "auto";
+    let btns = entry.parentNode.getElementsByClassName("ha-btn-collapsed-box");
+    for (btn of btns) {
+      btn.remove();
+    }
+  }
+  overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
+  overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
+  overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
+}
+
+//////////////////////////////// ONLOAD ////////////////////////////////////
 window.addEventListener("load", function () {
+  // Menu: Show / Hide Buttons for mobile View
   if (
-    document.getElementById("openmenubutton") != null &&
-    document.getElementById("closemenubutton") != null
+    document.getElementById("openmenubutton") !== null &&
+    document.getElementById("closemenubutton") !== null
   ) {
     document
       .getElementById("openmenubutton")
@@ -198,13 +255,61 @@ window.addEventListener("load", function () {
       .getElementById("closemenubutton")
       .addEventListener("click", closemenu);
   }
+
+  // Menu / Register / Search View: Mark active link
   if (document.getElementById("ha-topnav") != null)
     markactive_startswith(document.getElementById("ha-topnav"));
   if (document.getElementById("ha-register-nav") != null)
     markactive_exact(document.getElementById("ha-register-nav"));
-  overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
-  overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
-  overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
-  showhidebutton("ha-lettertextbtn", "ha-additionsbtn", "ha-additions", "ha-lettertext", false);
-  showhidebutton("ha-additionsbtn", "ha-lettertextbtn", "ha-lettertext", "ha-additions", true);
+
+  // Letter / Register View: Collapse all unfit boxes
+  collapseboxes();
+  //this.window.addEventListener('resize', collapseboxes);
+
+
+  // Letter View: Show / Hide Tabs
+  let buttonlist = ["ha-lettertextbtn", "ha-additionsbtn", "ha-marginalsbtn"];
+  let divlist = ["ha-lettertext", "ha-additions", "ha-marginals"];
+  showhidebutton(
+    "ha-lettertextbtn",
+    "ha-lettertext",
+    buttonlist,
+    divlist,
+    false
+  );
+  showhidebutton("ha-additionsbtn", "ha-additions", buttonlist, divlist, true);
+  showhidebutton("ha-marginalsbtn", "ha-marginals", buttonlist, divlist, true);
+
+  // Theme: Get saved theme from memory and check the box accordingly
+  // Register theme toggler
+  if (
+    document.getElementById("ha-togglebright") !== null &&
+    document.getElementById("ha-toggletwilight") !== null &&
+    this.document.getElementById("ha-toggledark") !== null
+  ) {
+    document
+      .getElementById("ha-togglebright")
+      .addEventListener("click", go_to_bright);
+    document
+      .getElementById("ha-toggledark")
+      .addEventListener("click", go_to_dark);
+    document
+      .getElementById("ha-toggletwilight")
+      .addEventListener("click", go_to_twilight);
+  }
+  get_theme_settings("ha-togglebright");
 });
+
+// import resolveConfig from 'tailwindcss/resolveConfig'
+// import tailwindConfig from './tailwind.config.js'
+
+// const fullConfig = resolveConfig(tailwindConfig)
+
+// fullConfig.theme.width[4]
+// // => '1rem'
+
+// fullConfig.theme.screens.md
+// // => '768px'
+
+// fullConfig.theme.boxShadow['2xl']
+// // => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'