From 9c52c2442ec2cb3a034fb01b70d8b35a2cd9b2ff Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Tue, 9 Dec 2025 20:05:39 +0100
Subject: [PATCH] Less-Styles in SassyCSS-Styles umgewandelt -- ALIGN
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Die Umwandlung wurde vorab mit `less2sass@1.0.3` durchgeführt:

----
npx less2sass less
----

Anschließend wurden die Ergebnisse entsprechend verschoben...
---
 assets/scss/base.scss               | 26 +++++------
 assets/scss/base/404.scss           |  8 ++--
 assets/scss/base/footer.scss        | 12 ++---
 assets/scss/base/formulare.scss     | 56 ++++++++++++------------
 assets/scss/base/head.scss          |  8 ++--
 assets/scss/base/navigation.scss    | 22 +++++-----
 assets/scss/base/typo.scss          | 48 ++++++++++----------
 assets/scss/phone.scss              | 30 ++++++-------
 assets/scss/phone/404.scss          |  2 +-
 assets/scss/phone/footer.scss       |  8 ++--
 assets/scss/phone/head.scss         |  2 +-
 assets/scss/phone/layout.scss       | 34 +++++++--------
 assets/scss/print.scss              | 16 +++----
 assets/scss/print/layout.scss       |  8 ++--
 assets/scss/print/typo.scss         |  2 +-
 assets/scss/screen.scss             | 68 ++++++++++++++---------------
 assets/scss/screen/content.scss     |  4 +-
 assets/scss/screen/faux-column.scss |  8 ++--
 assets/scss/screen/footer.scss      | 14 +++---
 assets/scss/screen/head.scss        |  4 +-
 assets/scss/screen/layout.scss      | 18 ++++----
 assets/scss/screen/marginal.scss    |  2 +-
 assets/scss/screen/menu.scss        | 14 +++---
 assets/scss/screen/packs.scss       |  4 +-
 assets/scss/seitenaufteilung.scss   |  6 +--
 assets/scss/seitenkopf.scss         |  8 ++--
 assets/scss/tablet.scss             | 32 +++++++-------
 assets/scss/tablet/footer.scss      | 26 +++++------
 assets/scss/tablet/head.scss        |  4 +-
 assets/scss/tablet/layout.scss      | 60 ++++++++++++-------------
 assets/scss/tablet/marginal.scss    |  2 +-
 assets/scss/tablet/typo.scss        |  2 +-
 assets/scss/tiny.scss               | 34 +++++++--------
 assets/scss/tiny/404.scss           |  2 +-
 assets/scss/variables.scss          | 46 ++++++++++---------
 35 files changed, 319 insertions(+), 321 deletions(-)

diff --git a/assets/scss/base.scss b/assets/scss/base.scss
index 7db4285..149c400 100644
--- a/assets/scss/base.scss
+++ b/assets/scss/base.scss
@@ -1,13 +1,13 @@
-@import 'variables.less';
-@import 'base/browserreset.less';
-@import 'base/fonts.less';
-@import 'base/util.less';
-@import 'base/typo.less';
-@import 'base/head.less';
-@import 'base/navigation.less';
-@import 'base/content.less';
-@import 'base/prettify.less';
-@import 'base/marginal.less';
-@import 'base/footer.less';
-@import 'base/formulare.less';
-@import 'base/404.less';
+@import 'variables.scss';
+@import 'base/browserreset.scss';
+@import 'base/fonts.scss';
+@import 'base/util.scss';
+@import 'base/typo.scss';
+@import 'base/head.scss';
+@import 'base/navigation.scss';
+@import 'base/content.scss';
+@import 'base/prettify.scss';
+@import 'base/marginal.scss';
+@import 'base/footer.scss';
+@import 'base/formulare.scss';
+@import 'base/404.scss';
diff --git a/assets/scss/base/404.scss b/assets/scss/base/404.scss
index 176ae54..7dc5d36 100644
--- a/assets/scss/base/404.scss
+++ b/assets/scss/base/404.scss
@@ -17,7 +17,7 @@
 }
 .withbackground .content > .main > .background
 {
-  .bpreplay;
+  @include bpreplay;
   display: block;
   position: absolute;
   z-index: 1;
@@ -27,13 +27,13 @@
 }
 .withbackground .content > .main > .heller
 {
-  color: @heller;
+  color: $heller;
   z-index: 2;
 }
 .withbackground .content > .main > .sehrhell
 {
-  color: @sehrhell;
-  text-shadow: .02em .01em 0 @hintergrund;
+  color: $sehrhell;
+  text-shadow: .02em .01em 0 $hintergrund;
 }
 #bs1
 {
diff --git a/assets/scss/base/footer.scss b/assets/scss/base/footer.scss
index 16d95a8..3a6d7c7 100644
--- a/assets/scss/base/footer.scss
+++ b/assets/scss/base/footer.scss
@@ -1,6 +1,6 @@
 #footerlinks
 {
-  .bpreplay;
+  @include bpreplay;
   position: relative;
   margin: 0;
   padding: 0;
@@ -14,18 +14,18 @@
 }
 #footerlinks #copyright
 {
-  color: @schrift;
+  color: $schrift;
   margin: 0;
   width: 100%;
 }
 #footerlinks a.f
 {
-  color: @normal;
-  border-color: @normal;
+  color: $normal;
+  border-color: $normal;
 }
 #footerlinks a.f:hover
 {
-  color: @dunkler;
-  border-color: @dunkler;
+  color: $dunkler;
+  border-color: $dunkler;
   border-style: solid;
 }
diff --git a/assets/scss/base/formulare.scss b/assets/scss/base/formulare.scss
index 55a7a8a..023d1f3 100644
--- a/assets/scss/base/formulare.scss
+++ b/assets/scss/base/formulare.scss
@@ -10,7 +10,7 @@
 .form hr.f {
   border-style: none;
   border-top-style: dashed;
-  border-color: @normal;
+  border-color: $normal;
   border-width: .0625em;
   margin: .625em 0; /** 10px 0 */
   background-color: transparent;
@@ -18,7 +18,7 @@
 
 /** Text im Formular */
 .form p.f {
-  color: @schrifthell;
+  color: $schrifthell;
 }
 .form p.f,
 .form .radiobutton > legend.f,
@@ -27,14 +27,14 @@
   display: block;
   font-size: 87.5%; /** 14px */
   line-height: 1.5em; /** 21px */
-  color: @schrifthell;
+  color: $schrifthell;
   margin: .428571429em 0; /** 6px 0 */
 }
 
 /** Aufzählungen im Formular */
 .form ul.f,
 .form ol.f {
-  color: @schrifthell;
+  color: $schrifthell;
   margin: 1em 0;
 }
 
@@ -48,7 +48,7 @@
   font-size: 81.25%; /** 13px */
   line-height: 1.230769231em; /** 16px */
   font-style: italic;
-  color: @schrifthell;
+  color: $schrifthell;
   padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
   background-image: url(../img/em.png);
   background-repeat: no-repeat;
@@ -66,7 +66,7 @@
   letter-spacing: .0454545em; /** 1px */
   line-height: 1em;
   padding: 0 0 .454545455em; /** 0 0 10px */
-  border-bottom: .090909091em solid @normal; /** 2px */
+  border-bottom: .090909091em solid $normal; /** 2px */
   margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
 }
 .form h2.f {
@@ -75,11 +75,11 @@
   text-transform: uppercase;
   line-height: 1.625em; /** 26px */
   padding: 0 0 0 .125em; /** 0 0 0 2px */
-  border-bottom: .0625em solid @normal; /** 1px */
+  border-bottom: .0625em solid $normal; /** 1px */
   margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
 }
 .form h3.f {
-/**  border-bottom: 1px dashed @normal; */
+/**  border-bottom: 1px dashed $normal; */
 }
 .form p.required {
   text-indent: -999em;
@@ -99,12 +99,12 @@
   padding-top: .1666666em; /** 3px */
   right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
   font-weight: 700;
-  color: @dunkel;
+  color: $dunkel;
 }
 
 /** Fehler-Hinweise */
 .f.error {
-  color: @fehler;
+  color: $fehler;
 }
 span.f.error {
   display: block;
@@ -112,8 +112,8 @@ span.f.error {
   font-size: 87.5%; /** 14px */
   line-height: 1.214285714em; /** 17px */
   padding: .571428571em; /** 8px */
-  color: @hintergrund;
-  background-color: @fehler;
+  color: $hintergrund;
+  background-color: $fehler;
   margin: .857142857em 0 0 0; /** 12px 0 0 0 */
 }
 span.f.error > span.e {
@@ -163,7 +163,7 @@ p.f + div.file {
   font-size: 87.5%; /** 14px */
   line-height: 1.214285714em; /** 17px */
   padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
-  color: @schrift;
+  color: $schrift;
 }
 .form .file > label.f {
   padding-top: .285714286em; /** 4px */
@@ -180,7 +180,7 @@ p.f + div.file {
   position: absolute;
   font-size: 128.5714286%; /** 18px zu 14px */
   font-weight: 700;
-  color: @dunkel;
+  color: $dunkel;
   top: .611111111em; /** 11px */
   left: 0;
 }
@@ -195,9 +195,9 @@ p.f + div.file {
   position: absolute;
   top: 0;
   font-size: 81.25%; /** 13px */
-  border: .076923077em solid @normal; /** 1px */
-  color: @schrift;
-  background-color: @sehrhell;
+  border: .076923077em solid $normal; /** 1px */
+  color: $schrift;
+  background-color: $sehrhell;
 }
 .form .text > input.f {
   line-height: 1.307692308em; /** 17px */
@@ -248,9 +248,9 @@ p.f + div.file {
 .form .textarea > textarea.f,
 .form .textarea > div.textarea {
   width: 100%;
-  border: .076923077em solid @normal; /** 1px */
-  color: @schrift;
-  background-color: @sehrhell;
+  border: .076923077em solid $normal; /** 1px */
+  color: $schrift;
+  background-color: $sehrhell;
   padding: .769230769em; /** 10px */
   position: relative;
   left: -.846153846em; /** -11px */
@@ -305,7 +305,7 @@ p.f + div.file {
   display: block;
   font-size: 87.5%; /** 14px */
   line-height: 1.285714286em; /** 18px */
-  color: @schrift;
+  color: $schrift;
   margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
 }
 .form div.checkbox > input.f,
@@ -336,7 +336,7 @@ p.f + div.file {
 .form .checkbox > .col2 > .f:focus > label.f,
 .form .radiobutton > .col2 > .f:active > label.f,
 .form .checkbox > .col2 > .f:active > label.f {
-  color: @schrift;
+  color: $schrift;
 }
 
 /** Sondereinstellungen für Fehler-Hervorhebungen */
@@ -344,10 +344,10 @@ p.f + div.file {
 .form .textarea > textarea.error,
 .form .select > select.error,
 .form .file > input.error {
-  color: @schrift;
+  color: $schrift;
   font-weight: 700;
-  border-color: @fehler;
-  background-color: @fehlerhell;
+  border-color: $fehler;
+  background-color: $fehlerhell;
 }
 
 
@@ -379,9 +379,9 @@ a.ln.button {
   line-height: 25px;
   padding:0 6px;
   height: 1.923076923em; /** 25px */
-  color: @hintergrund;
+  color: $hintergrund;
   font-weight: 700;
-  background-color: @normal;
+  background-color: $normal;
   border-style: none;
 }
 .form .submit > input.f,
@@ -414,6 +414,6 @@ a.ln.button:focus,
 .form .submit > a.f:active,
 .form .submit > input.f:active,
 a.ln.button:active {
-  background-color: @dunkel;
+  background-color: $dunkel;
   text-decoration: none;
 }
diff --git a/assets/scss/base/head.scss b/assets/scss/base/head.scss
index 01f1891..85b48d7 100644
--- a/assets/scss/base/head.scss
+++ b/assets/scss/base/head.scss
@@ -1,6 +1,6 @@
 #header
 {
-  .bpreplay;
+  @include bpreplay;
 }
 #logo
 {
@@ -9,7 +9,7 @@
   font-size: 100%; /* Um das Rechnen einfacher zu gestalten */
   margin: 0;
   padding: 0 0 0 .1875em; /* 30px */
-  color: @normal;
+  color: $normal;
   border: none;
   position: relative;
   top: .5em;
@@ -17,7 +17,7 @@
 }
 #logo a.l:hover
 {
-  color: @dunkler;
+  color: $dunkler;
   border-style: none;
 }
 #logo > .l > img.l
@@ -26,5 +26,5 @@
 }
 #slogan
 {
-  color: @normal;
+  color: $normal;
 }
diff --git a/assets/scss/base/navigation.scss b/assets/scss/base/navigation.scss
index 60874ab..e312cd4 100644
--- a/assets/scss/base/navigation.scss
+++ b/assets/scss/base/navigation.scss
@@ -4,11 +4,11 @@ h2.nav
 #menu,
 #submenu
 {
-  .bpreplay;
-  color: @normal;
+  @include bpreplay;
+  color: $normal;
   margin: .5em 0 1.5em 0;
   padding: 0.25em 0.25em 0.25em 1.5em;
-  border: 1px solid @normal;
+  border: 1px solid $normal;
 }
 #menu li.m,
 #submenu li.s
@@ -18,12 +18,12 @@ h2.nav
 #menu li.m a.m,
 #submenu li.s a.s
 {
-  color: @normal;
+  color: $normal;
 }
 #menu li.m a.m:hover,
 #submenu li.s a.s:hover
 {
-  color: @nochdunkler;
+  color: $nochdunkler;
 }
 #menu li.m strong.m,
 #menu li.m a.m.selected,
@@ -34,13 +34,13 @@ h2.nav
 #submenu li.s a.s:focus,
 #submenu li.s a.s:active
 {
-  color: @dunkler;
+  color: $dunkler;
 }
 
 #breadcrumb
 {
-  .bpreplay;
-  color: @normal;
+  @include bpreplay;
+  color: $normal;
 }
 #breadcrumb strong.b.title
 {
@@ -70,17 +70,17 @@ h2.nav
 }
 #breadcrumb ol.b li.b strong.b
 {
-  border-bottom: 1px solid @normal;
+  border-bottom: 1px solid $normal;
 }
 #breadcrumb ol.b li.b a.b
 {
-  color: @normal;
+  color: $normal;
 }
 #breadcrumb ol.b li.b a.b:hover,
 #breadcrumb ol.b li.b a.b:focus,
 #breadcrumb ol.b li.b a.b:active
 {
-  color: @dunkler;
+  color: $dunkler;
 }
 #breadcrumb a.hide
 {
diff --git a/assets/scss/base/typo.scss b/assets/scss/base/typo.scss
index 511caf1..7ab207a 100644
--- a/assets/scss/base/typo.scss
+++ b/assets/scss/base/typo.scss
@@ -2,23 +2,23 @@
 
 body
 {
-  .droid;
+  @include droid;
   letter-spacing: 0;
   line-height: 1.5em;
   padding: 0 1em 1em 1.5em;
-  background-color: @hintergrund;
+  background-color: $hintergrund;
 }
 h1, h2, h3, h4, h5, h6
 {
-  .bpreplay;
-  color: @schrifthell;
+  @include bpreplay;
+  color: $schrifthell;
   line-height: 1.25em;
   margin: 1.125em 0 .25em 0; /** Margin Top für h1 auf Marginalspalte abgestimmt! */
 }
 h1
 {
   font-size: 137.5%; /** 22 px */
-  color: @normal;
+  color: $normal;
   padding: 0 0 .25em 0; /** 0 0 5px 0 */
 }
 h2
@@ -35,7 +35,7 @@ h4
 }
 h1 a, h2 a, h3 a, h4 a
 {
-  color: @normal;
+  color: $normal;
   border-style: none;
 }
 h1 a:hover,
@@ -43,8 +43,8 @@ h2 a:hover,
 h3 a:hover,
 h4 a:hover
 {
-  color: @dunkler;
-  border-bottom: 1px solid @dunkler;
+  color: $dunkler;
+  border-bottom: 1px solid $dunkler;
 }
 h1 a:focus,
 h2 a:focus,
@@ -55,8 +55,8 @@ h2 a:active,
 h3 a:active,
 h4 a:active
 {
-  color: @dunkel;
-  border-bottom: 1px solid @dunkel;
+  color: $dunkel;
+  border-bottom: 1px solid $dunkel;
 }
 p
 {
@@ -103,37 +103,37 @@ code
 hr
 {
   border: none;
-  border-top: 2px solid @normal;
-  background-color: @normal;
+  border-top: 2px solid $normal;
+  background-color: $normal;
   height: 1px;
   margin: 1em 0 1em 0;
 }
 a
 {
-  color: @dunkler;
-  border-bottom: 1px dashed @dunkler;
+  color: $dunkler;
+  border-bottom: 1px dashed $dunkler;
 }
 a:hover
 {
-  color: @nochdunkler;
-  border-bottom: 1px solid @nochdunkler;
+  color: $nochdunkler;
+  border-bottom: 1px solid $nochdunkler;
 }
 a:focus,
 a:active
 {
-  color: @dunkler;
-  border-bottom: 1px solid @dunkler;
+  color: $dunkler;
+  border-bottom: 1px solid $dunkler;
 }
 a:visited
 {
-  border-bottom: 1px dotted @nochdunkler;
+  border-bottom: 1px dotted $nochdunkler;
 }
 
 h2 a,
 h3 a,
 h4 a
 {
-  color: @schrifthell;
+  color: $schrifthell;
 }
 h2 a:focus,
 h2 a:active,
@@ -142,13 +142,13 @@ h3 a:active,
 h4 a:focus,
 h4 a:active
 {
-  color: @normal;
-  border-bottom: 1px solid @normal;
+  color: $normal;
+  border-bottom: 1px solid $normal;
 }
 
  
 .logo
 {
-  .bpreplay;
-  color: @normal;
+  @include bpreplay;
+  color: $normal;
 }
diff --git a/assets/scss/phone.scss b/assets/scss/phone.scss
index 4b2fe8f..6f06bb7 100644
--- a/assets/scss/phone.scss
+++ b/assets/scss/phone.scss
@@ -1,17 +1,17 @@
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
 
-@import 'tablet/head.less';
-@import 'tablet/404.less';
+@import 'tablet/head.scss';
+@import 'tablet/404.scss';
 
-@import 'phone/typo.less';
-@import 'phone/layout.less';
-@import 'phone/head.less';
-@import 'phone/menu.less';
-@import 'phone/footer.less';
-@import 'phone/packs.less';
-@import 'phone/404.less';
+@import 'phone/typo.scss';
+@import 'phone/layout.scss';
+@import 'phone/head.scss';
+@import 'phone/menu.scss';
+@import 'phone/footer.scss';
+@import 'phone/packs.scss';
+@import 'phone/404.scss';
diff --git a/assets/scss/phone/404.scss b/assets/scss/phone/404.scss
index 96fe274..c68f8b6 100644
--- a/assets/scss/phone/404.scss
+++ b/assets/scss/phone/404.scss
@@ -10,7 +10,7 @@
 {
   position: relative;
   z-index: 3;
-  border-top: .142857143em solid @hintergrund; /** 2px */
+  border-top: .142857143em solid $hintergrund; /** 2px */
 }
 #bs1
 {
diff --git a/assets/scss/phone/footer.scss b/assets/scss/phone/footer.scss
index 01a021a..c2b4abc 100644
--- a/assets/scss/phone/footer.scss
+++ b/assets/scss/phone/footer.scss
@@ -9,15 +9,15 @@
 }
 #footer > #footerlinks > li.f
 {
-  color: @hintergrund;
+  color: $hintergrund;
   line-height: 1em;
   margin: 0 1em 0 0;
   padding: 0 0 .5em 0;
 }
 #footer > #footerlinks > li.f > a.f
 {
-  color: @hintergrund;
-  border-color: @hintergrund;
+  color: $hintergrund;
+  border-color: $hintergrund;
 }
 #footer > #footerlinks > li#copyright
 {
@@ -28,7 +28,7 @@
   margin: 0;
   @media (max-width: 229px)
   {
-    color: @schrift;
+    color: $schrift;
     flow: none;
     width: 100%;
   }
diff --git a/assets/scss/phone/head.scss b/assets/scss/phone/head.scss
index 162689c..cf9320b 100644
--- a/assets/scss/phone/head.scss
+++ b/assets/scss/phone/head.scss
@@ -2,7 +2,7 @@
 {
   #slogan
   {
-    color: @normal;
+    color: $normal;
     height: .3em;
     top: -1.1em;
   }
diff --git a/assets/scss/phone/layout.scss b/assets/scss/phone/layout.scss
index 7b276ba..f248668 100644
--- a/assets/scss/phone/layout.scss
+++ b/assets/scss/phone/layout.scss
@@ -55,7 +55,7 @@ body
 #menu
 {
   font-size: 150%;
-  border-bottom: .125em solid @hintergrund;
+  border-bottom: .125em solid $hintergrund;
   margin-top: 0;
   padding: .25em .25em 1em 1.5em;
 }
@@ -71,24 +71,24 @@ body
 }
 #menu > li.m > a.m
 {
-  color: @dunkel;
+  color: $dunkel;
 }
 #menu > li.m > strong.m
 {
-  color: @hintergrund;
-  border-bottom: .0625em solid @hintergrund;
+  color: $hintergrund;
+  border-bottom: .0625em solid $hintergrund;
 }
 #menu > li.m > a.m:hover,
 #menu > li.m > a.m:focus,
 #menu > li.m > a.m:active
 {
-  color: @dunkler;
-  border-bottom: .0625em solid @dunkler;
+  color: $dunkler;
+  border-bottom: .0625em solid $dunkler;
 }
 #menu > li.m > a.m.selected
 {
-  color: @hintergrund;
-  border-bottom: .0625em dashed @hintergrund;
+  color: $hintergrund;
+  border-bottom: .0625em dashed $hintergrund;
 }
 #menu > li.m > a.m.selected:hover,
 #menu > li.m > a.m.selected:focus,
@@ -119,7 +119,7 @@ body
   width: 3.5em;
   height: 3em;
   line-height: 2.1em;
-  color: @normal;
+  color: $normal;
   border-style: none;
 }
 #breadcrumb > a.hide:before
@@ -134,7 +134,7 @@ body
 #breadcrumb > a.hide:focus,
 #breadcrumb > a.hide:active
 {
-  color: @dunkler;
+  color: $dunkler;
 }
 
 
@@ -149,7 +149,7 @@ body
   padding: .25em 1em 999em 2.5em;
   margin-bottom: -993em;
   z-index: 5;
-  background-color: @heller;
+  background-color: $heller;
   #menu
   {
     padding-top: 0;
@@ -166,7 +166,7 @@ body
     width: 3.5em;
     height: 3em;
     line-height: 2.1em;
-    color: @hintergrund;
+    color: $hintergrund;
     border-style: none;
   }
   > a.hide:before
@@ -181,7 +181,7 @@ body
   > a.hide:focus,
   > a.hide:active
   {
-    color: @dunkler;
+    color: $dunkler;
   }
 }
 
@@ -191,11 +191,11 @@ body
 #footer
 {
   padding: 0 1em .5em 2.5em;
-  background-color: @heller;
+  background-color: $heller;
 }
 #footer > hr.f
 {
-  border-color: @hintergrund;
+  border-color: $hintergrund;
 }
 
 
@@ -206,7 +206,7 @@ body
 .marginal h3,
 .marginal h4
 {
-  color: @hintergrund;
+  color: $hintergrund;
 }
 
 
@@ -217,5 +217,5 @@ body
   margin-top: 4em;
   margin-bottom: -993em;
   padding: 1em 1em 999em 2.5em;
-  background-color: @heller;
+  background-color: $heller;
 }
diff --git a/assets/scss/print.scss b/assets/scss/print.scss
index 8d87aa4..06c3f76 100644
--- a/assets/scss/print.scss
+++ b/assets/scss/print.scss
@@ -1,9 +1,9 @@
-@import 'variables.less';
+@import 'variables.scss';
 
 #breadcrumb
 {
-  .droid;
-  color: @schrift;
+  @include droid;
+  color: $schrift;
   font-weight: normal;
 }
 #breadcrumb strong.b
@@ -13,7 +13,7 @@
 #breadcrumb ol.b li.b a.b,
 #breadcrumb ol.b li.b strong.b
 {
-  color: @schrift;
+  color: $schrift;
   border-style: none;
 }
 #breadcrumb a.hide
@@ -24,7 +24,7 @@
 {
   display: none;
 }
-@import 'print/typo.less';
-@import 'print/layout.less';
-@import 'print/head.less';
-@import 'print/prettify.less';
+@import 'print/typo.scss';
+@import 'print/layout.scss';
+@import 'print/head.scss';
+@import 'print/prettify.scss';
diff --git a/assets/scss/print/layout.scss b/assets/scss/print/layout.scss
index 392760e..84fcec6 100644
--- a/assets/scss/print/layout.scss
+++ b/assets/scss/print/layout.scss
@@ -16,8 +16,8 @@ body
 }
 #breadcrumb
 {
-  .droid;
-  color: @schrift;
+  @include droid;
+  color: $schrift;
   font-weight: normal;
 }
 #breadcrumb strong.b
@@ -27,7 +27,7 @@ body
 #breadcrumb ol.b li.b a.b,
 #breadcrumb ol.b li.b strong.b
 {
-  color: @schrift;
+  color: $schrift;
   border-style: none;
 }
 #breadcrumb a.hide
@@ -48,7 +48,7 @@ body
 }
 #footerlinks li#copyright
 {
-  .droid;
+  @include droid;
   font-size: 100%;
   display: block;
 }
diff --git a/assets/scss/print/typo.scss b/assets/scss/print/typo.scss
index 58e2ca6..e070c5e 100644
--- a/assets/scss/print/typo.scss
+++ b/assets/scss/print/typo.scss
@@ -1,5 +1,5 @@
 a
 {
-  color: @schrift;
+  color: $schrift;
   border-style: none;
 }
diff --git a/assets/scss/screen.scss b/assets/scss/screen.scss
index ba58223..9b43514 100644
--- a/assets/scss/screen.scss
+++ b/assets/scss/screen.scss
@@ -1,53 +1,53 @@
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
 
-@media (min-width: (@minscreen))
+@media (min-width: ($minscreen))
 {
-  @import 'screen/layout.less';
-  @import 'screen/footer.less';
-  @media (max-width: (@maxtablet))
+  @import 'screen/layout.scss';
+  @import 'screen/footer.scss';
+  @media (max-width: ($maxtablet))
   {
-    @import 'tablet/typo.less';
-    @import 'tablet/layout.less';
-    @import 'tablet/menu.less';
-    @import 'tablet/marginal.less';
-    @import 'tablet/footer.less';
+    @import 'tablet/typo.scss';
+    @import 'tablet/layout.scss';
+    @import 'tablet/menu.scss';
+    @import 'tablet/marginal.scss';
+    @import 'tablet/footer.scss';
   }
 }
-@media (min-width: (@mindesktop))
+@media (min-width: ($mindesktop))
 {
-  @import 'screen/faux-column.less';
-  @import 'screen/marginal.less';
-  @import 'screen/content.less';
+  @import 'screen/faux-column.scss';
+  @import 'screen/marginal.scss';
+  @import 'screen/content.scss';
   @media (max-width: 1079px)
   {
-    @import 'screen/onecolumn.less';
+    @import 'screen/onecolumn.scss';
   }
 }
 
-@media (max-width: (@maxtablet))
+@media (max-width: ($maxtablet))
 {
-  @import 'tablet/head.less';
-  @import 'tablet/404.less';
+  @import 'tablet/head.scss';
+  @import 'tablet/404.scss';
 }
 
-@media (max-width: (@maxphone))
+@media (max-width: ($maxphone))
 {
-  @import 'phone/typo.less';
-  @import 'phone/layout.less';
-  @import 'phone/head.less';
-  @import 'phone/menu.less';
-  @import 'phone/footer.less';
-  @import 'phone/packs.less';
-  @import 'phone/404.less';
+  @import 'phone/typo.scss';
+  @import 'phone/layout.scss';
+  @import 'phone/head.scss';
+  @import 'phone/menu.scss';
+  @import 'phone/footer.scss';
+  @import 'phone/packs.scss';
+  @import 'phone/404.scss';
 }
 
-@media (max-width: (@maxtiny))
+@media (max-width: ($maxtiny))
 {
-  @import 'tiny/layout.less';
-  @import 'tiny/404.less';
+  @import 'tiny/layout.scss';
+  @import 'tiny/404.scss';
 }
diff --git a/assets/scss/screen/content.scss b/assets/scss/screen/content.scss
index 35786c3..bc63604 100644
--- a/assets/scss/screen/content.scss
+++ b/assets/scss/screen/content.scss
@@ -9,7 +9,7 @@
   min-height: 1em;
   position: relative;
   width: 100%;
-  border-right: .125em solid @normal;
+  border-right: .125em solid $normal;
 }
 .mcontent > .mmarginal
 {
@@ -18,7 +18,7 @@
   padding: 0 2em 1.0625em 2em;
   position: relative;
   width: 20.375em;
-  border-left: .125em solid @normal;
+  border-left: .125em solid $normal;
 }
 .mcontent > .mmain > *
 {
diff --git a/assets/scss/screen/faux-column.scss b/assets/scss/screen/faux-column.scss
index 2b6e593..6e1a2d2 100644
--- a/assets/scss/screen/faux-column.scss
+++ b/assets/scss/screen/faux-column.scss
@@ -4,11 +4,11 @@
 .nomenu #page
 {
   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
-  border-right: 24.375em solid @heller;
+  border-right: 24.375em solid $heller;
 }
 .nomenu #page
 {
-  border-right-color: @sehrhell;
+  border-right-color: $sehrhell;
 }
 .menu .content,
 .nomenu .content
@@ -19,7 +19,7 @@
 .nomenu #header
 {
   margin-right: -24.375em;
-  background-color: @hintergrund;
+  background-color: $hintergrund;
 }
 .menu #breadcrumb,
 .nomenu #breadcrumb
@@ -30,5 +30,5 @@
 .nomenu #footer
 {
   margin-right: -24.375em;
-  background-color: @hintergrund;
+  background-color: $hintergrund;
 }
diff --git a/assets/scss/screen/footer.scss b/assets/scss/screen/footer.scss
index 884cfff..c7efe9a 100644
--- a/assets/scss/screen/footer.scss
+++ b/assets/scss/screen/footer.scss
@@ -1,6 +1,6 @@
 #footerlinks
 {
-  border-top: 1.25em solid @normal; /** 20px */
+  border-top: 1.25em solid $normal; /** 20px */
 }
 #footerlinks > li.f
 {
@@ -8,7 +8,7 @@
   display: inline-block;
   float: none;
   margin: .5em 1em 0 0;
-  color: @normal;
+  color: $normal;
   vertical-align: top;
 }
 #footerlinks > li#copyright
@@ -19,18 +19,18 @@
   right: .625em;
   top: -1em; /** 30px */
   line-height: 1.4em; /* 42px */
-  color: @hintergrund;
+  color: $hintergrund;
   margin: 0;
   font-size: 187.5%; /** 30px */
 }
 #footerlinks a.f
 {
-  color: @normal;
-  border-color: @normal;
+  color: $normal;
+  border-color: $normal;
 }
 #footerlinks a.f:hover
 {
-  color: @dunkler;
-  border-color: @dunkler;
+  color: $dunkler;
+  border-color: $dunkler;
   border-style: solid;
 }
diff --git a/assets/scss/screen/head.scss b/assets/scss/screen/head.scss
index 74f17d4..d385ee8 100644
--- a/assets/scss/screen/head.scss
+++ b/assets/scss/screen/head.scss
@@ -14,8 +14,8 @@
 #slogan
 {
   display: block;
-  color: @hintergrund;
-  background-color: @normal;
+  color: $hintergrund;
+  background-color: $normal;
   font-size: 187.5%; /** 30px */
   line-height: .6666666667em; /* 20px */
   height: .6em; /* 18px */
diff --git a/assets/scss/screen/layout.scss b/assets/scss/screen/layout.scss
index d01d090..93ef46f 100644
--- a/assets/scss/screen/layout.scss
+++ b/assets/scss/screen/layout.scss
@@ -8,7 +8,7 @@ body
 #page
 {
   margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */
-  max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */
+  max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.scss passen!!) */
 }
 
 /** Seitenaufteilung mit Menü (Zweispaltig) */
@@ -41,7 +41,7 @@ body
 .content > .marginal
 {
   position: relative;
-  background-color: @heller;
+  background-color: $heller;
 }
 .menu .content > .marginal,
 .nomenu .content > .marginal
@@ -56,7 +56,7 @@ body
 
 .nomenu .content > .marginal
 {
-  background-color: @sehrhell;
+  background-color: $sehrhell;
 }
 
 /** Anpassungen für einspaltige Seiten */
@@ -125,15 +125,15 @@ body
 #menu > li.m > .m
 {
   font-size: 250%; /** 40px */
-  color: @normal;
+  color: $normal;
 }
 #menu > li.m > a.m
 {
-  border-color: @normal;
+  border-color: $normal;
 }
 #menu > li.m > a.m:hover
 {
-  border-color: @dunkler;
+  border-color: $dunkler;
 }
 #menu > li.m > a.m:hover,
 #menu > li.m > strong.m
@@ -142,11 +142,11 @@ body
 }
 #menu > li.m > a.m.selected
 {
-  color: @normal;
+  color: $normal;
 }
 #menu > li.m > a.m:hover
 {
-  color: @dunkler;
+  color: $dunkler;
 }
 #menu > li.m > a.m:hover:before,
 #menu > li.m > a.m.selected:before,
@@ -190,7 +190,7 @@ body
 }
 .onecolumn #footer
 {
-  background-color: @hintergrund;
+  background-color: $hintergrund;
 }
 #footer > hr.f
 {
diff --git a/assets/scss/screen/marginal.scss b/assets/scss/screen/marginal.scss
index 02fc3cb..74424c1 100644
--- a/assets/scss/screen/marginal.scss
+++ b/assets/scss/screen/marginal.scss
@@ -3,5 +3,5 @@
 .menu .content > .marginal h3,
 .menu .content > .marginal h4
 {
-  color: @hintergrund;
+  color: $hintergrund;
 }
diff --git a/assets/scss/screen/menu.scss b/assets/scss/screen/menu.scss
index 79c3ce2..56ea693 100644
--- a/assets/scss/screen/menu.scss
+++ b/assets/scss/screen/menu.scss
@@ -14,7 +14,7 @@
 #nav > h2.nav.submenu:before
 {
   content: 'V ';
-  color: @hintergrund;
+  color: $hintergrund;
   margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
 }
 #nav > h2.nav.submenu > span.s
@@ -23,9 +23,9 @@
 }
 #nav > h2.nav.submenu > a.s
 {
-  color: @hintergrund;
+  color: $hintergrund;
   border-style: dashed;
-  border-color: @hintergrund;
+  border-color: $hintergrund;
 }
 #nav > h2.nav.submenu > a.s:hover,
 #nav > h2.nav.submenu > a.s:focus,
@@ -68,17 +68,17 @@
 }
 #submenu li.s > a.s
 {
-  color: @dunkler;
+  color: $dunkler;
 }
 #submenu li.s > a.s.selected,
 #submenu li.s > strong.s
 {
-  color: @hintergrund;
-  border-color: @hintergrund;
+  color: $hintergrund;
+  border-color: $hintergrund;
 }
 #submenu li.s > strong.s
 {
-  border-bottom: 1px solid @hintergrund;
+  border-bottom: 1px solid $hintergrund;
 }
 #submenu li.s > a.s.selected:before,
 #submenu li.s > a.s:hover:before,
diff --git a/assets/scss/screen/packs.scss b/assets/scss/screen/packs.scss
index 8c09844..5d5dae6 100644
--- a/assets/scss/screen/packs.scss
+++ b/assets/scss/screen/packs.scss
@@ -12,7 +12,7 @@
 .pack.bg > .p.left,
 .pack.bg > .p.right
 {
-  background-color: @sehrhell;
+  background-color: $sehrhell;
 }
 .pack > .p.left
 {
@@ -33,5 +33,5 @@
 }
 .single.bg
 {
-  background-color: @sehrhell;
+  background-color: $sehrhell;
 }
diff --git a/assets/scss/seitenaufteilung.scss b/assets/scss/seitenaufteilung.scss
index 5b73572..ce3f2f2 100644
--- a/assets/scss/seitenaufteilung.scss
+++ b/assets/scss/seitenaufteilung.scss
@@ -1,4 +1,4 @@
-@import 'variables.less';
+@import 'variables.scss';
 
-@import 'screen/layout.less';
-@import 'screen/content.less';
+@import 'screen/layout.scss';
+@import 'screen/content.scss';
diff --git a/assets/scss/seitenkopf.scss b/assets/scss/seitenkopf.scss
index 67ba63c..e2a7ec5 100644
--- a/assets/scss/seitenkopf.scss
+++ b/assets/scss/seitenkopf.scss
@@ -1,5 +1,5 @@
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
 
-@import 'screen/layout.less';
+@import 'screen/layout.scss';
diff --git a/assets/scss/tablet.scss b/assets/scss/tablet.scss
index 3c898f4..151b91e 100644
--- a/assets/scss/tablet.scss
+++ b/assets/scss/tablet.scss
@@ -1,17 +1,17 @@
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
 
-@import 'screen/layout.less';
-@import 'screen/footer.less';
-@import 'tablet/typo.less';
-@import 'tablet/layout.less';
-@import 'tablet/menu.less';
-@import 'tablet/marginal.less';
-@import 'tablet/footer.less';
-@import 'screen/onecolumn.less';
-@import 'tablet/head.less';
-@import 'tablet/404.less';
+@import 'screen/layout.scss';
+@import 'screen/footer.scss';
+@import 'tablet/typo.scss';
+@import 'tablet/layout.scss';
+@import 'tablet/menu.scss';
+@import 'tablet/marginal.scss';
+@import 'tablet/footer.scss';
+@import 'screen/onecolumn.scss';
+@import 'tablet/head.scss';
+@import 'tablet/404.scss';
diff --git a/assets/scss/tablet/footer.scss b/assets/scss/tablet/footer.scss
index 2541618..bcbf4f3 100644
--- a/assets/scss/tablet/footer.scss
+++ b/assets/scss/tablet/footer.scss
@@ -9,7 +9,7 @@
   line-height: 1em;
   display: block;
   margin: 0 0 .25em 0;
-  color: @hintergrund;
+  color: $hintergrund;
 }
 .menu #footer > #footerlinks > li#copyright
 {
@@ -20,28 +20,28 @@
   left: 0;
   right: 0;
   padding: 0 2.18181818em 1.5em; /* ? 3*16px ? */
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     padding-right: 1.45454545em;
     padding-bottom: 1em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     padding-right: .72727272em;
     padding-bottom: .5em;
   }
-  background-color: @heller;
+  background-color: $heller;
   text-align: right;
 }
 .menu #footer > #footerlinks a.f
 {
-  color: @hintergrund;
-  border-color: @hintergrund;
+  color: $hintergrund;
+  border-color: $hintergrund;
 }
 .menu #footer > #footerlinks a.f:hover
 {
-  color: @hintergrund;
-  border-color: @hintergrund;
+  color: $hintergrund;
+  border-color: $hintergrund;
   border-style: solid;
 }
 
@@ -52,15 +52,15 @@
   position: static;
   margin: -.125em;
   padding-top: 1.5em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     padding-top: 1em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     padding-top: .5em;
   }
-  border-top: .125em solid @hintergrund;
+  border-top: .125em solid $hintergrund;
   > li.f
   {
     line-height: 1em;
@@ -69,8 +69,8 @@
   }
   li.f > a.f
   {
-    color: @hintergrund;
-    border-color: @hintergrund;
+    color: $hintergrund;
+    border-color: $hintergrund;
   }
   li#copyright
   {
diff --git a/assets/scss/tablet/head.scss b/assets/scss/tablet/head.scss
index 9f1379d..b2502cc 100644
--- a/assets/scss/tablet/head.scss
+++ b/assets/scss/tablet/head.scss
@@ -1,4 +1,4 @@
-@media (max-width: (@maxsmalltablet))
+@media (max-width: ($maxsmalltablet))
 {
   #logo
   {
@@ -10,7 +10,7 @@
   }
 }
 
-@media (max-width: (@maxsmallertablet))
+@media (max-width: ($maxsmallertablet))
 {
   #logo
   {
diff --git a/assets/scss/tablet/layout.scss b/assets/scss/tablet/layout.scss
index 5698042..7e99116 100644
--- a/assets/scss/tablet/layout.scss
+++ b/assets/scss/tablet/layout.scss
@@ -23,11 +23,11 @@ body
 .nomenu .content
 {
   padding: 0 0 5em 0;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     padding-bottom: 4em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     padding-bottom: 3.25em;
   }
@@ -46,19 +46,19 @@ body
   float: none;
   width: auto;
   padding: 0 3em 0 5em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     padding: 0 2em 0 3em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     padding: 0 1em 0 2.5em;
   }
   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
       heraus... */
-  border-top: 1px solid @hintergrund;
-  border-bottom: 1px solid @hintergrund;
+  border-top: 1px solid $hintergrund;
+  border-bottom: 1px solid $hintergrund;
 }
 .menu .content > .marginal,
 .nomenu .content > .marginal,
@@ -91,12 +91,12 @@ body
 #header
 {
   padding: .125em 3em 2em 5em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     margin-left: -1.5em;
     padding: .125em 2em 2em 3em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     margin-left: -1.2em;
     padding: .125em 1em 2em 2.5em;
@@ -109,13 +109,13 @@ body
 .menu #nav
 {
   position: static;
-  border-right: .125em solid @hintergrund;
+  border-right: .125em solid $hintergrund;
   margin-left: 20em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     margin-left: 18.5em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     margin-left: 17.5em;
     #menu > li.about
@@ -141,12 +141,12 @@ body
   width: auto;
   top: -9em;
   right: 3em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     top: -7.7em;
     right: 2em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     top: -6.5em;
     right: 1em;
@@ -158,22 +158,22 @@ body
 }
 #menu > li.m
 {
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     padding: 0 0 0 3em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     padding: 0 0 0 2em;
   }
 }
 #menu > li.m > .m
 {
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     font-size: 200%; /* 32px */
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     font-size: 150%; /* 24px */
   }
@@ -182,12 +182,12 @@ body
 #menu > li.m > a.m.selected:before,
 #menu > li.m > strong.m:before
 {
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     content: '> ';
     margin-left: -.95em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
   }
 }
@@ -202,21 +202,21 @@ body
   margin: 3em 0 -999em -15em;
   padding: 0 0 999em 0;
   width: 15em;
-  background-color: @heller;
+  background-color: $heller;
 }
 .nomenu #footer,
 .onecolumn #footer
 {
   padding: 0 3em 1.5em 5em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     padding: 0 2em 1em 3em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     padding: 0 1em .75em 2.5em;
   }
-  background-color: @heller;
+  background-color: $heller;
   border-style: none;
 }
 
@@ -229,13 +229,13 @@ body
 {
   left: 15em;
   right: 3em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     font-size: 87.5%; /* 14px */
     top: 7.2em;
     left: 12.7142857em; /* 178px */
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     top: 6em; /* 84px */
     left: 5em; /*70px */
@@ -250,15 +250,15 @@ body
 {
   margin: 3.5em 0 -999em 0;
   padding: 2em 3em 995em 5em;
-  background-color: @heller;
+  background-color: $heller;
   position: relative;
   top: -4.5em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     padding-left: 3em;
     padding-right: 2em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     padding-left: 2.5em;
     padding-right: 1em;
@@ -267,12 +267,12 @@ body
 .menu .content > .marginal > aside.m
 {
   margin: 0 -12em 1em 20em;
-  @media (max-width: (@maxsmalltablet))
+  @media (max-width: ($maxsmalltablet))
   {
     margin-left: 18.5em;
     margin-right: -13em;
   }
-  @media (max-width: (@maxsmallertablet))
+  @media (max-width: ($maxsmallertablet))
   {
     margin-left: 17.5em;
     margin-right: -14em;
diff --git a/assets/scss/tablet/marginal.scss b/assets/scss/tablet/marginal.scss
index 576c4e1..19d54c0 100644
--- a/assets/scss/tablet/marginal.scss
+++ b/assets/scss/tablet/marginal.scss
@@ -7,5 +7,5 @@
 .nomenu .content > .marginal h4,
 .onecolumn .content > .marginal h4
 {
-  color: @hintergrund;
+  color: $hintergrund;
 }
diff --git a/assets/scss/tablet/typo.scss b/assets/scss/tablet/typo.scss
index 6bf6dff..83ac50a 100644
--- a/assets/scss/tablet/typo.scss
+++ b/assets/scss/tablet/typo.scss
@@ -1,4 +1,4 @@
-@media (max-width: (@maxsmalltablet))
+@media (max-width: ($maxsmalltablet))
 {
   h1
   {
diff --git a/assets/scss/tiny.scss b/assets/scss/tiny.scss
index 1f54b45..e0bc906 100644
--- a/assets/scss/tiny.scss
+++ b/assets/scss/tiny.scss
@@ -1,20 +1,20 @@
-@import 'variables.less';
-@import 'screen/head.less';
-@import 'screen/menu.less';
-@import 'screen/footer-sticky.less';
-@import 'screen/wip.less';
-@import 'screen/packs.less';
+@import 'variables.scss';
+@import 'screen/head.scss';
+@import 'screen/menu.scss';
+@import 'screen/footer-sticky.scss';
+@import 'screen/wip.scss';
+@import 'screen/packs.scss';
 
-@import 'tablet/head.less';
-@import 'tablet/404.less';
+@import 'tablet/head.scss';
+@import 'tablet/404.scss';
 
-@import 'phone/typo.less';
-@import 'phone/layout.less';
-@import 'phone/head.less';
-@import 'phone/menu.less';
-@import 'phone/footer.less';
-@import 'phone/packs.less';
-@import 'phone/404.less';
+@import 'phone/typo.scss';
+@import 'phone/layout.scss';
+@import 'phone/head.scss';
+@import 'phone/menu.scss';
+@import 'phone/footer.scss';
+@import 'phone/packs.scss';
+@import 'phone/404.scss';
 
-@import 'tiny/layout.less';
-@import 'tiny/404.less';
+@import 'tiny/layout.scss';
+@import 'tiny/404.scss';
diff --git a/assets/scss/tiny/404.scss b/assets/scss/tiny/404.scss
index 3830a8f..243420f 100644
--- a/assets/scss/tiny/404.scss
+++ b/assets/scss/tiny/404.scss
@@ -1,6 +1,6 @@
 .withbackground .content > .marginal
 {
-  border-top: .166666666666em solid @hintergrund; /** 2px */
+  border-top: .166666666666em solid $hintergrund; /** 2px */
 }
 #bs1
 {
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index cae170c..1f2df16 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -1,42 +1,40 @@
 /** Farb-Thema */
 
-@normal:      #0ACF00;
-@dunkel:      #2D9B27;
-@dunkler:     #078600;
-@nochdunkler: #077600;
-@hell:        #42E73A;
-@heller:      #6EE768;
-@sehrhell:    #CEF7C8;
+$normal:      #0ACF00;
+$dunkel:      #2D9B27;
+$dunkler:     #078600;
+$nochdunkler: #077600;
+$hell:        #42E73A;
+$heller:      #6EE768;
+$sehrhell:    #CEF7C8;
 
-@schrift:     #000;
-@schrifthell: tint(@schrift, 45%); 
+$schrift:     #000;
+$schrifthell: tint($schrift, 45%); 
 
-@hintergrund: #FFF;
+$hintergrund: #FFF;
 
-@fehler:      #e60000;
-@fehlerhell:  tint(@fehler, 70%);
+$fehler:      #e60000;
+$fehlerhell:  tint($fehler, 70%);
 
 
 /** Bildschirmbreiten für Media-Query */
 
-@minscreen:      580px;
-@mindesktop:     940px;
-@maxtablet:      @mindesktop - 1;
-@maxsmalltablet: 800px;
-@maxsmallertablet: 700px;
-@maxphone:       579px;
-@minphone:       300px;
-@maxtiny:        299px;
+$minscreen:      580px;
+$mindesktop:     940px;
+$maxtablet:      $mindesktop - 1;
+$maxsmalltablet: 800px;
+$maxsmallertablet: 700px;
+$maxphone:       579px;
+$minphone:       300px;
+$maxtiny:        299px;
 
 /** Schriften */
 
-.droid ()
-{
+@mixin droid() {
   font-family: 'DroidSerif', 'Times New Roman', 'Palatino Linotype' , serif;
 }
 
-.bpreplay ()
-{
+@mixin bpreplay() {
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
 }
-- 
2.39.5