diff --git a/slt/.gitignore b/slt/.gitignore
index 2ccbe46..6ff7d6b 100644
--- a/slt/.gitignore
+++ b/slt/.gitignore
@@ -1 +1,2 @@
 /node_modules/
+/.stylelintcache
diff --git a/slt/css/abstract/_colors.scss b/slt/css/abstract/_colors.scss
new file mode 100644
index 0000000..a5f969f
--- /dev/null
+++ b/slt/css/abstract/_colors.scss
@@ -0,0 +1,15 @@
+$color-lehre: #d9c254;
+$color-breitensport: #a6d400;
+$color-jugend: #04b;
+$color-jmd: #e95d00;
+$color-fachverbaende: #eec008;
+$color-sport: #bc0023;
+
+:root {
+    --color-lehre: #{$color-lehre};
+    --color-breitensport: #{$color-breitensport};
+    --color-jugend: #{$color-jugend};
+    --color-jmd: #{$color-jmd};
+    --color-fachverbaende: #{$color-fachverbaende};
+    --color-sport: #{$color-sport};
+}
diff --git a/slt/css/abstract/_index.scss b/slt/css/abstract/_index.scss
new file mode 100644
index 0000000..10511ad
--- /dev/null
+++ b/slt/css/abstract/_index.scss
@@ -0,0 +1,2 @@
+@forward "responsive";
+@forward "colors";
diff --git a/slt/css/abstract/_responsive.scss b/slt/css/abstract/_responsive.scss
new file mode 100644
index 0000000..817f5d0
--- /dev/null
+++ b/slt/css/abstract/_responsive.scss
@@ -0,0 +1,13 @@
+// Some Mixins for various screen sizes
+
+@mixin for-desktop {
+    @media screen and (min-width: 1000px) {
+        @content;
+    }
+}
+
+@mixin for-wide-desktop {
+    @media screen and (min-width: 1200px) {
+        @content;
+    }
+}
diff --git a/slt/css/components/_article.scss b/slt/css/components/_article.scss
new file mode 100644
index 0000000..426f606
--- /dev/null
+++ b/slt/css/components/_article.scss
@@ -0,0 +1,28 @@
+@use "../abstract" as abstract;
+
+.article-info {
+    font-size: smaller;
+    clear: both;
+}
+
+@include abstract.for-desktop {
+    .btn {
+        border-radius: 0;
+    }
+
+    p.readmore {
+        text-align: right;
+        font-size: smaller;
+
+        > .btn {
+            font-size: inherit;
+            background-image: none;
+            border: none;
+            text-shadow: unset;
+
+            > span[class^="icon-"] {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/slt/css/components/_index.scss b/slt/css/components/_index.scss
new file mode 100644
index 0000000..31a6106
--- /dev/null
+++ b/slt/css/components/_index.scss
@@ -0,0 +1,2 @@
+@use "slideshow";
+@use "article";
diff --git a/slt/css/components/_slideshow.scss b/slt/css/components/_slideshow.scss
new file mode 100644
index 0000000..7e4e7ae
--- /dev/null
+++ b/slt/css/components/_slideshow.scss
@@ -0,0 +1,10 @@
+@use "../abstract" as abstract;
+
+#slideshow {
+    flex: 1;
+    display: none;
+
+    @include abstract.for-desktop {
+        display: inline-block;
+    }
+}
diff --git a/slt/css/core/_core.scss b/slt/css/core/_core.scss
new file mode 100644
index 0000000..5db0008
--- /dev/null
+++ b/slt/css/core/_core.scss
@@ -0,0 +1,48 @@
+@use "../abstract" as abstract;
+
+body {
+    margin: 0;
+    min-height: 100.1vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /*    padding: 0px 20px 10px 20px; */
+    padding: 0;
+    font-size: 12pt;
+    font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
+    line-height: 175%;
+
+    @include abstract.for-desktop {
+        overflow: scroll;
+        padding: 0;
+    }
+}
+
+a {
+    text-decoration: none;
+}
+
+p {
+    text-align: justify;
+    hyphens: auto;
+}
+
+h3 {
+    font-size: 133% /*16pt*/;
+}
+
+h2 {
+    font-size: 158% /*19pt*/;
+}
+
+h1 {
+    font-size: 183% /*22pt*/;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    line-height: 150%;
+}
diff --git a/slt/css/core/_default-classes.scss b/slt/css/core/_default-classes.scss
new file mode 100644
index 0000000..a20492a
--- /dev/null
+++ b/slt/css/core/_default-classes.scss
@@ -0,0 +1,32 @@
+.pull-right > img,
+.pull-left > img,
+.pull-right > a > img,
+.pull-left > a > img {
+    margin: 10px;
+}
+
+.centered {
+    text-align: center;
+}
+
+.ragged-left {
+    text-align: left;
+}
+
+li.row-fluid {
+    display: block;
+}
+
+.page-header {
+    padding-bottom: 0;
+}
+
+.row-striped .row-fluid:nth-child(n),
+.list-striped li:nth-child(n),
+.table-striped tbody > tr:nth-child(n) > td {
+    background-color: inherit;
+}
+
+.well {
+    background-color: inherit;
+}
diff --git a/slt/css/core/_index.scss b/slt/css/core/_index.scss
new file mode 100644
index 0000000..b5ae181
--- /dev/null
+++ b/slt/css/core/_index.scss
@@ -0,0 +1,2 @@
+@use "core";
+@use "default-classes";
diff --git a/slt/css/layout/_footer.scss b/slt/css/layout/_footer.scss
new file mode 100644
index 0000000..e9c842b
--- /dev/null
+++ b/slt/css/layout/_footer.scss
@@ -0,0 +1,63 @@
+@use "../abstract" as abstract;
+
+#impressum {
+    flex: 0 0 auto;
+    text-align: right;
+    margin-top: 30px;
+    padding: 5px;
+
+    .nav {
+        margin-bottom: 0;
+        background-color: inherit;
+        display: inline-block;
+
+        > li {
+            display: inline-block;
+        }
+    }
+
+    a {
+        text-decoration: underline;
+        padding: 10px;
+    }
+}
+
+#footer {
+    flex: 0 0 auto;
+    background-color: black;
+
+    // color: white;
+    text-align: center;
+    padding: 5px;
+    font-size: x-small;
+    line-height: 100%;
+    color: gray;
+
+    > .customimpressum {
+        float: left;
+    }
+
+    > .customdatenschutz {
+        float: right;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: underline;
+
+        &:hover,
+        &:focus {
+            color: black;
+            background-color: white;
+            text-decoration: underline;
+        }
+    }
+}
+
+#footline {
+    margin-top: 10px;
+
+    @include abstract.for-desktop {
+        flex: none;
+    }
+}
diff --git a/slt/css/layout/_index.scss b/slt/css/layout/_index.scss
new file mode 100644
index 0000000..c432f2f
--- /dev/null
+++ b/slt/css/layout/_index.scss
@@ -0,0 +1,10 @@
+@use "page-layout";
+@use "topmenu";
+@use "leftmenu";
+@use "rightcolumn";
+@use "footer";
+@use "mobile-menu";
+@use "menu";
+@use "pageheader";
+@use "side-images";
+@use "main-content";
diff --git a/slt/css/layout/_leftmenu.scss b/slt/css/layout/_leftmenu.scss
new file mode 100644
index 0000000..7c3bc97
--- /dev/null
+++ b/slt/css/layout/_leftmenu.scss
@@ -0,0 +1,60 @@
+@use "../abstract" as abstract;
+
+#left_menu {
+    display: none;
+
+    @include abstract.for-desktop {
+        flex: 0 1 20%;
+        display: block;
+        margin: 15px 0 15px 5px;
+
+        > ul.menu {
+            padding: 10px;
+
+            &:hover {
+                box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+            }
+
+            li > a {
+                padding: 2px 5px;
+            }
+        }
+    }
+
+    .nav {
+        background-color: transparent;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        &:hover {
+            box-shadow: unset;
+        }
+
+        > li {
+            border-style: none;
+            display: none;
+
+            &.active {
+                display: block;
+                border-style: none;
+
+                > a {
+                    background-color: transparent;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
+    .nav > li,
+    .nav-child > li {
+        padding: 5px 0;
+        border-top-style: solid;
+        border-width: 1px;
+    }
+
+    .nav > li:first-child,
+    .nav-child > li:first-child {
+        border-top-style: none;
+    }
+}
diff --git a/slt/css/layout/_main-content.scss b/slt/css/layout/_main-content.scss
new file mode 100644
index 0000000..88e787f
--- /dev/null
+++ b/slt/css/layout/_main-content.scss
@@ -0,0 +1,25 @@
+@use "../abstract" as abstract;
+
+#content {
+    flex: 1 0 auto;
+
+    @include abstract.for-desktop {
+        display: flex;
+    }
+}
+
+#main_column {
+    margin: 15px;
+
+    @include abstract.for-desktop {
+        flex: 1 1 60%;
+        display: flex;
+        flex-flow: column nowrap;
+    }
+}
+
+#main_content {
+    @include abstract.for-desktop {
+        flex: 1 1 auto;
+    }
+}
diff --git a/slt/css/layout/_menu.scss b/slt/css/layout/_menu.scss
new file mode 100644
index 0000000..72eb955
--- /dev/null
+++ b/slt/css/layout/_menu.scss
@@ -0,0 +1,45 @@
+@use "../abstract" as abstract;
+
+.nav {
+    font-size: inherit;
+
+    a {
+        color: inherit;
+    }
+}
+
+.nav-child {
+    font-size: small;
+
+    > li > a {
+        @include abstract.for-desktop {
+            display: block;
+        }
+    }
+}
+
+.nav,
+.nav-child {
+    padding: 0;
+
+    > li {
+        display: block;
+
+        > .nav-child {
+            padding-left: 10px;
+            margin-left: 10px;
+
+            /* border-left: solid gray 1px; */
+
+            /* TODO */
+        }
+    }
+}
+
+ul.nav > li > a:hover,
+ul.nav-child > li > a:hover {
+    /* background-color: inherit; */
+
+    /* FIXME */
+    text-decoration: none;
+}
diff --git a/slt/css/layout/_mobile-menu.scss b/slt/css/layout/_mobile-menu.scss
new file mode 100644
index 0000000..d1dc9ea
--- /dev/null
+++ b/slt/css/layout/_mobile-menu.scss
@@ -0,0 +1,77 @@
+@use "../abstract" as abstract;
+
+#mobile_menu,
+#content {
+    margin: 0 15px;
+}
+
+#mobile_menu {
+    margin-top: 10px;
+    display: none;
+
+    &.visible {
+        display: block;
+
+        @include abstract.for-desktop {
+            display: none;
+        }
+    }
+
+    a {
+        font-size: initial;
+        margin-right: 0;
+        padding-right: 0;
+    }
+
+    li > a {
+        margin: 5px 0;
+        padding: 10px 5px;
+        display: block;
+        flex: 0;
+    }
+
+    .nav {
+        padding: 0;
+        border: none;
+        margin-left: 0;
+    }
+
+    li {
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+
+    .nav-child > li {
+        margin: 0;
+    }
+
+    li > ul.nav {
+        margin-left: -5px;
+        margin-right: -5px;
+    }
+
+    li ul {
+        border: none;
+    }
+
+    > ul.menu {
+        background-color: initial;
+        color: initial;
+        margin-bottom: initial;
+    }
+}
+
+#mobile_menu_switch {
+    flex: 0 0 auto;
+    text-align: right;
+
+    @include abstract.for-desktop {
+        display: none;
+    }
+}
+
+#btn_mobile_menu {
+    padding: 10px 30px 0 0;
+    width: 40px;
+    box-sizing: initial;
+}
diff --git a/slt/css/layout/_page-layout.scss b/slt/css/layout/_page-layout.scss
new file mode 100644
index 0000000..2d42c25
--- /dev/null
+++ b/slt/css/layout/_page-layout.scss
@@ -0,0 +1,49 @@
+@use "../abstract" as abstract;
+
+#page-div {
+    width: 100%;
+
+    @include abstract.for-desktop {
+        display: flex;
+        flex-flow: row;
+
+        // width: 100%;
+        justify-content: space-around;
+    }
+}
+
+#page {
+    /* box-shadow: 30vw 0px 5vw -10vw green inset; */
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+
+    @include abstract.for-desktop {
+        flex: 0 0 auto;
+        width: 1000px;
+        background-color: inherit;
+    }
+}
+
+#page,
+#page-div {
+    @include abstract.for-desktop {
+        min-height: calc(100vh - 40px);
+    }
+}
+
+#page-bg {
+    display: none;
+
+    @include abstract.for-desktop {
+        display: block;
+        position: fixed;
+        width: 1000px;
+        height: calc(100% - 40px);
+        bottom: 0;
+        z-index: -9;
+        left: calc((100% - 1000px) / 2);
+    }
+}
diff --git a/slt/css/layout/_pageheader.scss b/slt/css/layout/_pageheader.scss
new file mode 100644
index 0000000..2172d29
--- /dev/null
+++ b/slt/css/layout/_pageheader.scss
@@ -0,0 +1,17 @@
+@use "../abstract" as abstract;
+
+#header {
+    flex: 0 0 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    @include abstract.for-desktop {
+        justify-content: space-around;
+    }
+
+    > div {
+        margin: 20px;
+        align-items: center;
+    }
+}
diff --git a/slt/css/layout/_rightcolumn.scss b/slt/css/layout/_rightcolumn.scss
new file mode 100644
index 0000000..8754bbd
--- /dev/null
+++ b/slt/css/layout/_rightcolumn.scss
@@ -0,0 +1,11 @@
+@use "../abstract" as abstract;
+
+#right_column {
+    display: none;
+
+    @include abstract.for-desktop {
+        flex: 1 1 15%;
+        display: block;
+        margin: 15px 5px 15px 0;
+    }
+}
diff --git a/slt/css/layout/_side-images.scss b/slt/css/layout/_side-images.scss
new file mode 100644
index 0000000..80459df
--- /dev/null
+++ b/slt/css/layout/_side-images.scss
@@ -0,0 +1,29 @@
+@use "../abstract" as abstract;
+
+@include abstract.for-desktop {
+    #left_side-image,
+    #right_side-image {
+        position: fixed;
+        height: 100vh;
+        width: calc((100% - 980px) / 2);
+        z-index: -10;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+        opacity: 0.5;
+    }
+
+    #left_side-image {
+        left: 0;
+    }
+
+    #right_side-image {
+        right: 0;
+    }
+}
+
+#left_side,
+#right_side {
+    background-repeat: no-repeat;
+    background-size: cover;
+}
diff --git a/slt/css/layout/_topmenu.scss b/slt/css/layout/_topmenu.scss
new file mode 100644
index 0000000..6589949
--- /dev/null
+++ b/slt/css/layout/_topmenu.scss
@@ -0,0 +1,183 @@
+@use "../abstract/" as abstract;
+
+#topmenu {
+    display: none;
+    font-weight: bold;
+    text-align: center;
+
+    @include abstract.for-desktop {
+        position: fixed;
+        display: flex;
+        width: 100vw;
+        z-index: 5000;
+        font-weight: bold;
+        text-align: center;
+
+        a {
+            color: inherit;
+        }
+    }
+
+    a {
+        color: inherit;
+    }
+
+    > .topmenu-sep {
+        display: inline-block;
+        flex: 1 1 auto;
+    }
+
+    .nav > li,
+    .nav-child > li {
+        padding: 0;
+        border-style: none;
+    }
+
+    .nav {
+        flex: 0 0 auto;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        position: relative;
+        align-items: center;
+
+        @include abstract.for-desktop {
+            padding: 0 10px;
+            margin: 0;
+            height: 40px;
+            width: 980px;
+        }
+
+        > li {
+            display: inline-block;
+            text-align: left;
+
+            @include abstract.for-desktop {
+                text-align: left;
+            }
+
+            > a {
+                position: relative;
+                font-size: large;
+
+                @include abstract.for-desktop {
+                    font-size: large;
+                    padding: 10px;
+                    z-index: 3001;
+                }
+            }
+
+            & > a,
+            &:hover > a {
+                background-color: inherit;
+            }
+
+            > .nav-child {
+                position: absolute;
+                display: none;
+
+                @include abstract.for-desktop {
+                    z-index: 3000;
+                    margin: 0 20px 10px 0;
+                    border: none;
+                    padding: 0;
+                }
+
+                > li {
+                    @include abstract.for-desktop {
+                        padding: 0 5px;
+                    }
+
+                    > a {
+                        display: block;
+
+                        @include abstract.for-desktop {
+                            padding: 10px 5px 10px 4px;
+
+                            // border-left-color: transparent;
+                            // border-left-style: solid;
+                            // border-left-width: 6px;
+                            border-left: 6px solid transparent;
+                        }
+                    }
+
+                    &:hover > a {
+                        text-decoration: none;
+                    }
+                }
+            }
+
+            &:hover > .nav-child {
+                display: block;
+
+                @include abstract.for-desktop {
+                    box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
+                }
+            }
+        }
+    }
+
+    @include abstract.for-desktop {
+        li > a,
+        li:hover > a,
+        li:focus > a,
+        li:active > a {
+            background-color: inherit;
+            color: inherit;
+        }
+
+        .nav-child > li:hover > a:hover,
+        .nav-child > li:focus > a:hover,
+        .nav-child > li:hover > a:focus {
+            text-decoration: none;
+        }
+    }
+
+    // Special colors for topics
+    > ul.nav .nav-child a.lehre {
+        border-left-color: abstract.$color-lehre;
+    }
+
+    > ul.nav .nav-child a.breitensport {
+        border-left-color: abstract.$color-breitensport;
+    }
+
+    > ul.nav .nav-child a.jugend {
+        border-left-color: abstract.$color-jugend;
+    }
+
+    > ul.nav .nav-child a.jmd {
+        border-left-color: abstract.$color-jmd;
+    }
+
+    > ul.nav .nav-child a.fachverbaende {
+        border-left-color: abstract.$color-fachverbaende;
+    }
+
+    > ul.nav .nav-child a.sport {
+        border-left-color: abstract.$color-sport;
+    }
+}
+
+#topmenu-div {
+    @include abstract.for-desktop {
+        width: 100vw;
+        height: 40px;
+    }
+}
+
+a.facebook {
+    img {
+        display: none;
+
+        @include abstract.for-desktop {
+            display: inline;
+        }
+    }
+
+    > span.image-title {
+        @include abstract.for-desktop {
+            display: none;
+        }
+    }
+}
diff --git a/slt/css/style.scss b/slt/css/style.scss
index 02fc0fe..7a1cee1 100644
--- a/slt/css/style.scss
+++ b/slt/css/style.scss
@@ -1,556 +1,7 @@
-// Some Mixins for various screen sizes
-
-@mixin for-desktop {
-    @media screen and (min-width: 1000px) {
-        @content;
-    }
-}
-
-@mixin for-wide-desktop {
-    @media screen and (min-width: 1200px) {
-        @content;
-    }
-}
-
-// The main styles
-
-body {
-    margin: 0;
-    min-height: 100.1vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    /*    padding: 0px 20px 10px 20px; */
-    padding: 0;
-
-    @include for-desktop {
-        overflow: scroll;
-        padding: 0;
-    }
-}
-
-#page-div {
-    width: 100%;
-
-    @include for-desktop {
-        display: flex;
-        flex-flow: row;
-
-        // width: 100%;
-        justify-content: space-around;
-    }
-}
-
-#page {
-    /* box-shadow: 30vw 0px 5vw -10vw green inset; */
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    min-height: 100vh;
-
-    @include for-desktop {
-        flex: 0 0 auto;
-        width: 1000px;
-        background-color: inherit;
-    }
-}
-
-#page,
-#page-div {
-    @include for-desktop {
-        min-height: calc(100vh - 40px);
-    }
-}
-
-#page-bg {
-    display: none;
-
-    @include for-desktop {
-        display: block;
-        position: fixed;
-        width: 1000px;
-        height: calc(100% - 40px);
-        bottom: 0;
-        z-index: -9;
-        left: calc((100% - 1000px) / 2);
-    }
-}
-
-@include for-desktop {
-    #left_side-image,
-    #right_side-image {
-        position: fixed;
-        height: 100vh;
-        width: calc((100% - 980px) / 2);
-        z-index: -10;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-position: center center;
-        opacity: 0.5;
-    }
-
-    #left_side-image {
-        left: 0;
-    }
-
-    #right_side-image {
-        right: 0;
-    }
-}
-
-/*
- * Menu configuration
- */
-
-.nav,
-.nav-child {
-    padding: 0;
-
-    > li {
-        display: block;
-
-        > .nav-child {
-            padding-left: 10px;
-            margin-left: 10px;
-
-            /* border-left: solid gray 1px; */
-
-            /* TODO */
-        }
-    }
-}
-
-.nav {
-    font-size: inherit;
-}
-
-.nav-child {
-    font-size: small;
-
-    > li > a {
-        @include for-desktop {
-            display: block;
-        }
-    }
-}
-
-/*
- * Topmenu positioning and styling
- */
-
-#topmenu {
-    display: none;
-
-    @include for-desktop {
-        position: fixed;
-        display: flex;
-        width: 100vw;
-        z-index: 5000;
-        font-weight: bold;
-        text-align: center;
-
-        a {
-            color: inherit;
-        }
-    }
-
-    > .topmenu-sep {
-        display: inline-block;
-        flex: 1 1 auto;
-    }
-
-    .nav {
-        flex: 0 0 auto;
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: space-between;
-        position: relative;
-        align-items: center;
-
-        @include for-desktop {
-            padding: 0 10px;
-            margin: 0;
-            height: 40px;
-            width: 980px;
-        }
-
-        > li {
-            display: inline-block;
-
-            @include for-desktop {
-                text-align: left;
-            }
-
-            > a {
-                position: relative;
-
-                @include for-desktop {
-                    font-size: large;
-                    padding: 10px;
-                    z-index: 3001;
-                    font-size: large;
-                }
-            }
-
-            > .nav-child {
-                position: absolute;
-                display: none;
-
-                @include for-desktop {
-                    z-index: 3000;
-                    margin: 0 20px 10px 0;
-                    border: none;
-                    padding: 0;
-                }
-
-                > li {
-                    @include for-desktop {
-                        padding: 0 5px;
-                    }
-
-                    > a {
-                        display: block;
-
-                        @include for-desktop {
-                            padding: 10px 5px 10px 4px;
-                            border-left-color: transparent;
-                            border-left-style: solid;
-                            border-left-width: 6px;
-                        }
-                    }
-                }
-            }
-
-            &:hover > .nav-child {
-                display: block;
-
-                @include for-desktop {
-                    box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
-                }
-            }
-        }
-    }
-
-    @include for-desktop {
-        li > a,
-        li:hover > a,
-        li:focus > a,
-        li:active > a {
-            background-color: inherit;
-            color: inherit;
-        }
-
-        .nav-child > li:hover > a:hover,
-        .nav-child > li:focus > a:hover,
-        .nav-child > li:hover > a:focus {
-            text-decoration: none;
-        }
-    }
-}
-
-#topmenu-div {
-    @include for-desktop {
-        width: 100vw;
-        height: 40px;
-    }
-}
-
-/*
- * Header line positioning
- */
-
-#header {
-    flex: 0 0 auto;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-
-    @include for-desktop {
-        justify-content: space-around;
-    }
-
-    > div {
-        margin: 20px;
-        align-items: center;
-    }
-}
-
-#slideshow {
-    flex: 1;
-    display: none;
-
-    @include for-desktop {
-        display: inline-block;
-    }
-}
-
-/*
- * Content positioning
- */
-
-#content {
-    flex: 1 0 auto;
-
-    @include for-desktop {
-        display: flex;
-    }
-}
-
-#left_menu {
-    display: none;
-
-    @include for-desktop {
-        flex: 0 1 20%;
-        display: block;
-        margin: 15px 0 15px 5px;
-
-        > ul.menu {
-            padding: 10px;
-
-            &:hover {
-                box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
-            }
-
-            li > a {
-                padding: 2px 5px;
-            }
-        }
-    }
-}
-
-#main_column {
-    margin: 15px;
-
-    @include for-desktop {
-        flex: 1 1 60%;
-        display: flex;
-        flex-flow: column nowrap;
-    }
-}
-
-#main_content {
-    @include for-desktop {
-        flex: 1 1 auto;
-    }
-}
-
-#right_column {
-    display: none;
-
-    @include for-desktop {
-        flex: 1 1 15%;
-        display: block;
-        margin: 15px 5px 15px 0;
-    }
-}
-
-#footline {
-    margin-top: 10px;
-
-    @include for-desktop {
-        flex: none;
-    }
-}
-
-/*
- * Footer positioning
- */
-
-#impressum {
-    flex: 0 0 auto;
-    text-align: right;
-    margin-top: 30px;
-    padding: 5px;
-
-    .nav {
-        margin-bottom: 0;
-        background-color: inherit;
-        display: inline-block;
-
-        > li {
-            display: inline-block;
-        }
-    }
-
-    a {
-        text-decoration: underline;
-        padding: 10px;
-    }
-}
-
-#footer {
-    flex: 0 0 auto;
-    background-color: black;
-    color: white;
-    text-align: center;
-    padding: 5px;
-
-    > .customimpressum {
-        float: left;
-    }
-
-    > .customdatenschutz {
-        float: right;
-    }
-
-    a {
-        color: inherit;
-        text-decoration: underline;
-
-        &:hover,
-        &:focus {
-            color: black;
-            background-color: white;
-            text-decoration: underline;
-        }
-    }
-}
-
-/*
- * Mobile menu positioning
- */
-
-#mobile_menu,
-#content {
-    margin: 0 15px;
-}
-
-#mobile_menu {
-    margin-top: 10px;
-    display: none;
-
-    &.visible {
-        display: block;
-
-        @include for-desktop {
-            display: none;
-        }
-    }
-
-    li > a {
-        margin: 5px 0;
-        padding: 10px 5px;
-        display: block;
-        flex: 0;
-    }
-
-    .nav {
-        padding: 0;
-        border: none;
-        margin-left: 0;
-    }
-
-    li {
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-
-    .nav-child > li {
-        margin: 0;
-    }
-
-    li > ul.nav {
-        margin-left: -5px;
-        margin-right: -5px;
-    }
-
-    li ul {
-        border: none;
-    }
-
-    a {
-        font-size: initial;
-        margin-right: 0;
-        padding-right: 0;
-    }
-
-    > ul.menu {
-        background-color: initial;
-        color: initial;
-        margin-bottom: initial;
-    }
-}
-
-#mobile_menu_switch {
-    flex: 0 0 auto;
-    text-align: right;
-
-    @include for-desktop {
-        display: none;
-    }
-}
-
-#btn_mobile_menu {
-    padding: 10px 30px 0 0;
-    width: 40px;
-    box-sizing: initial;
-}
-
-a.facebook {
-    img {
-        display: none;
-
-        @include for-desktop {
-            display: inline;
-        }
-    }
-
-    > span.image-title {
-        @include for-desktop {
-            display: none;
-        }
-    }
-}
-
-.article-info {
-    font-size: smaller;
-}
-
-/********************************* Desktop.css */
-
-@media screen and (min-width: 1000px) {
-    /*
-Additional content
-*/
-
-    #left_side-image,
-    #right_side-image {
-
-    }
-
-    #page {
-    }
-
-    p.readmore {
-        text-align: right;
-        font-size: smaller;
-    }
-
-    .btn {
-        border-radius: 0;
-    }
-
-    .readmore > .btn {
-        font-size: inherit;
-        background-image: none;
-        border: none;
-        text-shadow: unset;
-    }
-
-    p.readmore > .btn > span[class^="icon-"] {
-        display: none;
-    }
-
-    /*
- * Debug
- */
-
-    /* #right_column,#left_menu,#main_content,#footline {
-    background-color: rgba(0,0,0,0.1);
-} */
-}
+@use "abstract";
+@use "core";
+@use "layout";
+@use "components";
 
 /*
  * Debug
diff --git a/slt/package.json b/slt/package.json
index a0ed89b..f7ea0dd 100644
--- a/slt/package.json
+++ b/slt/package.json
@@ -3,8 +3,8 @@
   "version": "0.0.9",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "stylelint": "npx stylelint css/*.scss --cache",
-    "stylelint-fix": "npx stylelint css/*.scss --fix",
+    "stylelint": "npx stylelint css/*.scss css/**/*.scss --cache",
+    "stylelint-fix": "npx stylelint css/**.scss css/**/*.scss --fix",
     "sass": "npx sass css/style.scss:css/style.css -s compressed --no-source-map",
     "sass-dev": "npx sass css/style.scss:css/style.css",
     "sass-watch": "npx sass css/style.scss:css/style.css --watch"