]> juplo.de Git - website/commitdiff
Less-Styles in SassyCSS-Styles umgewandelt -- ALIGN
authorKai Moritz <kai@juplo.de>
Tue, 9 Dec 2025 19:05:39 +0000 (20:05 +0100)
committerKai Moritz <kai@juplo.de>
Tue, 9 Dec 2025 21:05:39 +0000 (22:05 +0100)
Die Umwandlung wurde vorab mit `less2sass@1.0.3` durchgeführt:

----
npx less2sass less
----

Anschließend wurden die Ergebnisse entsprechend verschoben...

35 files changed:
assets/scss/base.scss
assets/scss/base/404.scss
assets/scss/base/footer.scss
assets/scss/base/formulare.scss
assets/scss/base/head.scss
assets/scss/base/navigation.scss
assets/scss/base/typo.scss
assets/scss/phone.scss
assets/scss/phone/404.scss
assets/scss/phone/footer.scss
assets/scss/phone/head.scss
assets/scss/phone/layout.scss
assets/scss/print.scss
assets/scss/print/layout.scss
assets/scss/print/typo.scss
assets/scss/screen.scss
assets/scss/screen/content.scss
assets/scss/screen/faux-column.scss
assets/scss/screen/footer.scss
assets/scss/screen/head.scss
assets/scss/screen/layout.scss
assets/scss/screen/marginal.scss
assets/scss/screen/menu.scss
assets/scss/screen/packs.scss
assets/scss/seitenaufteilung.scss
assets/scss/seitenkopf.scss
assets/scss/tablet.scss
assets/scss/tablet/footer.scss
assets/scss/tablet/head.scss
assets/scss/tablet/layout.scss
assets/scss/tablet/marginal.scss
assets/scss/tablet/typo.scss
assets/scss/tiny.scss
assets/scss/tiny/404.scss
assets/scss/variables.scss

index 7db4285e2d0e26499f0c34539bd0679e2842f169..149c40006007f583cdcdd6c971f1aa75e1b11570 100644 (file)
@@ -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';
index 176ae5480dfb6c56a6429e2fd827a40af0a49e9a..7dc5d367c2d0774c2193d1005208c8641d6c2262 100644 (file)
@@ -17,7 +17,7 @@
 }
 .withbackground .content > .main > .background
 {
-  .bpreplay;
+  @include bpreplay;
   display: block;
   position: absolute;
   z-index: 1;
 }
 .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
 {
index 16d95a8ecf34eb489344f87518786b0d53643995..3a6d7c792a1abbd95fa66ab8f397f299f2e69e73 100644 (file)
@@ -1,6 +1,6 @@
 #footerlinks
 {
-  .bpreplay;
+  @include bpreplay;
   position: relative;
   margin: 0;
   padding: 0;
 }
 #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;
 }
index 55a7a8a6f0c081833fa6bb1561fed922a6a3c44c..023d1f34a4674cfbd2fe29d8e5f171a853058696 100644 (file)
@@ -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,
   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 {
   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;
   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;
 }
index 01f1891705611deca03da56418b232b568ed81bd..85b48d738dabf13a2efcb5cf761a54b35ee91064 100644 (file)
@@ -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;
 }
index 60874ab6c03deae035f0708d57515edf3458b1c8..e312cd432ac38ed05ef2f7e8f5c2120befd98e1d 100644 (file)
@@ -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
 {
index 511caf133f415bef7770f0ee59fd3b3cd70b2535..7ab207a1f4e8c35d27bdec133054bdc22643d6fa 100644 (file)
@@ -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;
 }
index 4b2fe8f3d37f1afb8a95cded72e7701b7b463206..6f06bb724a7dc7d626fc9efc659e9b66e3e6de06 100644 (file)
@@ -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';
index 96fe27481d8bf9e6de42af191eba1ca271eec455..c68f8b6057ff8ceb039aa8ebad49149c799d6544 100644 (file)
@@ -10,7 +10,7 @@
 {
   position: relative;
   z-index: 3;
-  border-top: .142857143em solid @hintergrund; /** 2px */
+  border-top: .142857143em solid $hintergrund; /** 2px */
 }
 #bs1
 {
index 01a021a8fc2123b48072b369053f82951b0b88d8..c2b4abccbb362ef7f0f3183becc7a0884c3f2153 100644 (file)
@@ -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%;
   }
index 162689ccf7b499b06c4451cb864c4cae85a27e3f..cf9320b7d1733f385c06300cf9647e5f2129474c 100644 (file)
@@ -2,7 +2,7 @@
 {
   #slogan
   {
-    color: @normal;
+    color: $normal;
     height: .3em;
     top: -1.1em;
   }
index 7b276ba3db5d4b9f7c05b8295f22d71c47ed4f55..f24866861bb8565160cf3f1c5bb76247470a8b28 100644 (file)
@@ -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;
 }
index 8d87aa483fc67a7e144819d79a9e62abdc9beff4..06c3f76c8b545a557cbfab773bfe711545555af0 100644 (file)
@@ -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';
index 392760e850097d8a67ca8f46e41233810dedc667..84fcec6137fb165b843fd3d3fff117b63fb20b69 100644 (file)
@@ -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;
 }
index 58e2ca636b177f3de52a815ffca31202f8ae8235..e070c5eb7383aa8dc89c4206d8b7d1de60a9b4b7 100644 (file)
@@ -1,5 +1,5 @@
 a
 {
-  color: @schrift;
+  color: $schrift;
   border-style: none;
 }
index ba58223e3f3cf6d482b4d9b89ce88ab8cb2bcdd1..9b4351487c49a1c6f7f5527525249c5eaaee3e20 100644 (file)
@@ -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';
 }
index 35786c324d975359dd519302e121501249620d0e..bc636043ccc0e4baa5c688cf08ef3ad834939ce2 100644 (file)
@@ -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 > *
 {
index 2b6e5932eb14a896310eef65b7d96340c95c3db8..6e1a2d2c1422916724ed27941485da15a48b0325 100644 (file)
@@ -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;
 }
index 884cfffad22dd73f567baab7a68d77c5bde0a5da..c7efe9a8d1df7d611720a9adf59546d072253e61 100644 (file)
@@ -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
   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;
 }
index 74f17d4b580e3b2dee0d0bbd5313c3ff1668b45c..d385ee8baee70cf024354742ed13073c459e46e9 100644 (file)
@@ -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 */
index d01d0907e723e75df66c84ee36eff67f210c4861..93ef46fa5a9ea8bd2f665cc9ec2d66e3f22eea75 100644 (file)
@@ -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
 {
index 02fc3cbc0574da9d31a8ab943dc083cdec4a5daa..74424c1eb5bd07f267093d00a8731babc04ae211 100644 (file)
@@ -3,5 +3,5 @@
 .menu .content > .marginal h3,
 .menu .content > .marginal h4
 {
-  color: @hintergrund;
+  color: $hintergrund;
 }
index 79c3ce28f5165dc05d7b79230854a3998d8000a8..56ea693b225e14a0ff2c92c90486587445dcbebc 100644 (file)
@@ -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,
 }
 #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,
index 8c09844e08807ab85f6d50e6c56a99826c8f4791..5d5dae6be113b10ab536583b5b4ee030a2032421 100644 (file)
@@ -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;
 }
index 5b73572ccf39721ac7f1d7069f954001c0252077..ce3f2f209665e93d71c2e232ebc8121179f17e3f 100644 (file)
@@ -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';
index 67ba63cd21c3f5a02a702ca2f8989fa80d17f07e..e2a7ec50b8aa27e7c3eb7b712f55f56b4da5511a 100644 (file)
@@ -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';
index 3c898f41b83ba3ac3c3ae4c73152ca3292867133..151b91e4d23c8e52006f26038345cfa1aa5259b3 100644 (file)
@@ -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';
index 2541618b2468066ac351d5db7d13fe552d8d1bf5..bcbf4f38c09471592e551a3d9333e59cb88b7aa0 100644 (file)
@@ -9,7 +9,7 @@
   line-height: 1em;
   display: block;
   margin: 0 0 .25em 0;
-  color: @hintergrund;
+  color: $hintergrund;
 }
 .menu #footer > #footerlinks > li#copyright
 {
   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;
 }
 
   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
   {
index 9f1379dd3ad592ae0b1e5284993ac404ce597781..b2502cc6a2c82bb8d1c0f12b064cac97f7a7e767 100644 (file)
@@ -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
   {
index 5698042dbfa5c04202970bbc272952fce690a7f6..7e99116e7edbbe89276136333b0de7876bf72f5f 100644 (file)
@@ -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;
index 576c4e1f6e829529a9bca67a4b590384a8189cb1..19d54c038c4cc14b02bf180894be5b66d20bc3bd 100644 (file)
@@ -7,5 +7,5 @@
 .nomenu .content > .marginal h4,
 .onecolumn .content > .marginal h4
 {
-  color: @hintergrund;
+  color: $hintergrund;
 }
index 6bf6dffcd5741e2554c8739a0b4acfffa9341a64..83ac50a0e44b8d3acf1413caca6135a1502e508b 100644 (file)
@@ -1,4 +1,4 @@
-@media (max-width: (@maxsmalltablet))
+@media (max-width: ($maxsmalltablet))
 {
   h1
   {
index 1f54b45003c630f8b050a5974f0d72e69db772f6..e0bc9066bbed9efcff7ff675e4e80f2421a65d64 100644 (file)
@@ -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';
index 3830a8f2d678ef2d4504b680ea99b87cb6f2ea69..243420f9e48652477dde116b3527fc35243624d0 100644 (file)
@@ -1,6 +1,6 @@
 .withbackground .content > .marginal
 {
-  border-top: .166666666666em solid @hintergrund; /** 2px */
+  border-top: .166666666666em solid $hintergrund; /** 2px */
 }
 #bs1
 {
index cae170ca2177e8018cfa741d406d87bca77b1bd4..1f2df16e9afb8ef2ff510412e4d6542947e36349 100644 (file)
@@ -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;
 }