diff --git a/dav_base/static/dav_base/css/local.css b/dav_base/static/dav_base/css/local.css
index 90b1278..0b9dd27 100644
--- a/dav_base/static/dav_base/css/local.css
+++ b/dav_base/static/dav_base/css/local.css
@@ -1,3 +1,19 @@
+/*
+ * Colors
+ * color    text    focus   bg      focus   btn     focus   border  focus   active  function
+ * orange   #f07d00 #bd6200 #f07d00 #bd6200 #f07d00 #bd6200 #d77000 #572d00 #995000 primary
+ * green    #3c763d #2b542c #dff0d8 #c1e2b3 #58ab27 #43811e #4d9622 #182e0b #346417 success
+ * blue     #31708f #245269 #d9edf7 #afd9ee #1d70b7 #16558b #1a63a1 #081f33 #11426c info
+ * yellow   #8a6d3b #66512c #fcf8e3 #f7ecb5 #f9b000 #c68c00 #e09e00 #604400 #a27300 warning, Klettern
+ * red      #a94442 #843534 #f2dede #e4b9b9 #be1621 #901119 #a7131d #350609 #700d14 danger
+ * mandarin #b43a12 #902c0e #f0ded8 #e1bcb0 #e84e1b #b43a12 #aa3711 #3c1306 #78250c
+ * lime     #859201 #656e01 #eef0d8 #dde1b0 #bccf07 #859201 #7c8801 #2e3200 #4f5601 Bergsteigen
+ * cyan     #54bbd9 #469db5 #d8ebf0 #a7d5e1 #86cfe4 #54bbd9 #4cb8d7 #17343c #3a8ea5 Ski
+ * caramel  #9c5b22 #78461a #f0e3d8 #e1c6b0 #ce792d #9c5b22 #935720 #3c230d #613915 Wanderung
+ * purple   #866dac #566088 #e1d8f0 #c2b0e1 #a694c2 #866dac #8067a8 #2f263c #5a4876 Mountainbike
+ * brown    ???     ???     ???     ???     #925f36 ???     ???     ???     ???
+ */
+
 /*
  * General elements
  */
@@ -256,3 +272,187 @@ thead input {
     border-color: #aa3711;
     color: #fff;
 }
+
+/*
+ * Elements for sport categories
+ */
+/*
+ * Bergsteigen: lime
+ */
+.btn-sport-B {
+    background-color: #bccf07;
+    border-color: #7c8801;
+    color: #fff;
+}
+.btn-sport-B.focus, .btn-sport-B:focus, .btn-sport-B:hover {
+    background-color: #859201;
+    border-color: #2e3200;
+    color: #fff;
+}
+/*
+ * Klettern: yellow
+ */
+.btn-sport-K {
+    background-color: #f9b000;
+    border-color: #e09e00;
+    color: #fff;
+}
+.btn-sport-K.focus, .btn-sport-K:focus, .btn-sport-K:hover {
+    background-color: #c68c00;
+    border-color: #604400;
+    color: #fff;
+}
+/*
+ * Mountainbike: purple
+ */
+.btn-sport-M {
+    background-color: #a694c2;
+    border-color: #8067a8;
+    color: #fff;
+}
+.btn-sport-M.focus, .btn-sport-M:focus, .btn-sport-M:hover {
+    background-color: #866dac;
+    border-color: #2f263c;
+    color: #fff;
+}
+/*
+ * Ski: cyan
+ */
+.btn-sport-S {
+    background-color: #86cfe4;
+    border-color: #4cb8d7;
+    color: #fff;
+}
+.btn-sport-S.focus, .btn-sport-S:focus, .btn-sport-S:hover {
+    background-color: #54bbd9;
+    border-color: #17343c;
+    color: #fff;
+}
+/*
+ * Wanderung: caramel
+ */
+.btn-sport-W {
+    background-color: #ce792d;
+    border-color: #935720;
+    color: #fff;
+}
+.btn-sport-W.focus, .btn-sport-W:focus, .btn-sport-W:hover {
+    background-color: #9c5b22;
+    border-color: #3c230d;
+    color: #fff;
+}
+
+/*
+ * Universal Buttons
+ */
+.btn-orange {
+    background-color: #f07d00;
+    border-color: #d77000;
+    color: #fff;
+}
+.btn-orange.focus, .btn-orange:focus, .btn-orange:hover {
+    background-color: #bd6200;
+    border-color: #572d00;
+    color: #fff;
+}
+.btn-green {
+    background-color: #58ab27;
+    border-color: #4d9622;
+    color: #fff;
+}
+.btn-green.focus, .btn-green:focus, .btn-green:hover {
+    background-color: #43811e;
+    border-color: #182e0b;
+    color: #fff;
+}
+.btn-blue {
+    background-color: #1d70b7;
+    border-color: #1a63a1;
+    color: #fff;
+}
+.btn-blue.focus, .btn-blue:focus, .btn-blue:hover {
+    background-color: #16558b;
+    border-color: #081f33;
+    color: #fff;
+}
+.btn-yellow {
+    background-color: #f9b000;
+    border-color: #e09e00;
+    color: #fff;
+}
+.btn-yellow.focus, .btn-yellow:focus, .btn-yellow:hover {
+    background-color: #c68c00;
+    border-color: #604400;
+    color: #fff;
+}
+.btn-red {
+    background-color: #be1621;
+    border-color: #a7131d;
+    color: #fff;
+}
+.btn-red.focus, .btn-red:focus, .btn-red:hover {
+    background-color: #901119;
+    border-color: #350609;
+    color: #fff;
+}
+.btn-mandarin {
+    background-color: #e84e1b;
+    border-color: #aa3711;
+    color: #fff;
+}
+.btn-mandarin.focus, .btn-mandarin:focus, .btn-mandarin:hover {
+    background-color: #b43a12;
+    border-color: #3c1306;
+    color: #fff;
+}
+.btn-lime {
+    background-color: #bccf07;
+    border-color: #7c8801;
+    color: #fff;
+}
+.btn-lime.focus, .btn-lime:focus, .btn-lime:hover {
+    background-color: #859201;
+    border-color: #2e3200;
+    color: #fff;
+}
+.btn-cyan {
+    background-color: #86cfe4;
+    border-color: #4cb8d7;
+    color: #fff;
+}
+.btn-cyan.focus, .btn-cyan:focus, .btn-cyan:hover {
+    background-color: #54bbd9;
+    border-color: #17343c;
+    color: #fff;
+}
+.btn-caramel {
+    background-color: #ce792d;
+    border-color: #935720;
+    color: #fff;
+}
+.btn-caramel.focus, .btn-caramel:focus, .btn-caramel:hover {
+    background-color: #9c5b22;
+    border-color: #3c230d;
+    color: #fff;
+}
+.btn-purple {
+    background-color: #a694c2;
+    border-color: #8067a8;
+    color: #fff;
+}
+.btn-purple.focus, .btn-purple:focus, .btn-purple:hover {
+    background-color: #866dac;
+    border-color: #2f263c;
+    color: #fff;
+}
+
+.btn-white {
+    background-color: #fff;
+    border-color: #ccc;
+    color: #333;
+}
+.btn-white.focus, .btn-white:focus, .btn-white:hover {
+    background-color: #e6e6e6;
+    border-color: #8c8c8c;
+    color: #333;
+}