Form fine tuning and link list add

LinkList add LInk
Converted indentation to spaces globally.
2020-08-21 12:08:51 +02:00 · 2020-08-21 10:51:07 +02:00 · 2020-08-17 15:39:17 +02:00 · 2020-08-16 20:56:34 +02:00 · 2020-08-16 17:50:55 +02:00 · 2020-08-16 17:22:08 +02:00
93 changed files with 2201 additions and 6794 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
+package-lock.json

 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
--- a/components/01_Atoms/_atoms.scss
+++ b/components/01_Atoms/_atoms.scss
@@ -8,3 +8,5 @@
@import 'image/image';
@import 'logo/logo';
@import 'tag/tag';
+@import 'message/message';
+@import 'pagination/pagination';
--- a/components/01_Atoms/button/_button.scss
+++ b/components/01_Atoms/button/_button.scss
@@ -5,6 +5,7 @@
    padding: 8px 14px;
    border-radius: 2px;
    font-weight: bold;
+    cursor: pointer;

    &:active{
        background-color: $-wine-red;
@@ -12,6 +13,11 @@
    }

    &--cancel{
+        background-color: $-grey;
+        color: $-almost-white;
+        &:active{
+            color: $-grey;
            background-color: $-almost-white;
        }
    }
+}
--- a/components/01_Atoms/headline/_headline.scss
+++ b/components/01_Atoms/headline/_headline.scss
@@ -5,7 +5,7 @@
    padding-top: 0px;
    margin-top: 0px;
    padding-bottom: 0px;
-    margin-bottom: 0px;
+    margin-bottom: 25px;

    &--main{
        position: relative;
--- a/components/01_Atoms/headline/headline.hbs
+++ b/components/01_Atoms/headline/headline.hbs
@@ -1 +1 @@
-<h1 class="LP-Headline LP-Headline{{modifier}}">{{headline}}</h1>
+<h1 class="LP-Headline{{#if modifier}} LP-Headline{{modifier}}{{/if}}">{{headline}}</h1>
--- a/components/01_Atoms/image/_image.scss
+++ b/components/01_Atoms/image/_image.scss
@@ -3,4 +3,6 @@
    width: 100%;
    height: auto;
    vertical-align: top;
+    margin: 0;
+    padding: 0;
 }
--- a/components/01_Atoms/input/_input.scss
+++ b/components/01_Atoms/input/_input.scss
@@ -8,7 +8,7 @@
    .LP-Input__Field{
        border: none;
        border-bottom: 1px solid $-grey;
-        padding: 8px;
+		padding: 8px 0;
        margin-bottom: $-margin-bottom;

        &:focus, &:active, &:invalid{
@@ -18,6 +18,22 @@
            border-radius: 3px 3px 0 0;
            box-shadow: none;
        }
+        
+        &[type=submit]{
+            background-color: $-light-brown;
+            color: $-grey;
+            border: none;
+            padding: 8px 14px;
+            border-radius: 2px;
+            font-weight: bold;
+            cursor: pointer;
+
+            &:active{
+                background-color: $-wine-red;
+                color:$-almost-white;
+            }
+
+        }
    }

    .LP-Input__Label{
--- a/components/01_Atoms/input/input.hbs
+++ b/components/01_Atoms/input/input.hbs
@@ -1,6 +1,6 @@
 <div class="LP-Input LP-Input{{modifier}}">
    <label for="input123" class="LP-Input__Label">{{label}}</label>
-    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"
+    <input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}">
    {{#if disabled}}
        disabled="disabled"
    {{/if}}
--- a/components/01_Atoms/link/_link.scss
+++ b/components/01_Atoms/link/_link.scss
@@ -1,13 +1,13 @@
 .LP-Link {
    color: $-grey;
    text-decoration: none;
-    font-family: $-primary-sans-serif-accent-font;
+    font-family: $-primary-sans-serif-font;
    &:hover {
        color: $-light-brown;
    }

-    .LP-Text{
-        font-family: $-primary-sans-serif-accent-font;
+    .LP-Paragraph{
+        font-family: $-primary-sans-serif-font;
        &:hover{
            color: $-light-brown;
        }
--- a/components/01_Atoms/message/_message.scss
+++ b/components/01_Atoms/message/_message.scss
@@ -0,0 +1,69 @@
+.LP-Message{
+    display: flex;
+    flex-direction: row;
+    justify-content: center; 
+    align-items: stretch; 
+    background-color: $-almost-white;
+    font-family: $-primary-sans-serif-font;
+    border-radius: 3px;
+    font-weight: bold;
+    box-shadow: 0 0 2px $-grey;
+    overflow: hidden;
+
+    &--error{
+        .LP-Message__Icon{
+            background-color: invert(#fd6861);
+            background-image: url('icons/error.png');
+        }
+    }
+
+    &--warning{
+        .LP-Message__Icon{
+            background-color:invert(#ffb818);
+            background-image: url('icons/error.png');
+        }
+    }
+
+
+    &--info{
+        .LP-Message__Icon{
+            background-color: invert(lightblue);
+            background-image: url('icons/information.svg');
+        }
+    }
+
+    &--success{
+        .LP-Message__Icon{
+            background-color: invert(#96c800);
+            background-image: url('icons/success.svg');
+        }
+    }
+
+    &--debug{
+        .LP-Message__Icon{
+            background-color: invert(#fb95d0);
+            background-image: url('icons/debug.png');
+        }
+    }
+
+    .LP-Message__Icon{
+        background-size: 40px 40px;
+        background-repeat: no-repeat;
+        background-position: center; 
+        height: 100%;
+        min-height: 50px;
+        width: 50px;
+        filter: invert(1);
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    .LP-Message__Text{
+        padding: 0 15px;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 8px;
+    }
+}
--- a/components/01_Atoms/message/message.config.json
+++ b/components/01_Atoms/message/message.config.json
@@ -0,0 +1,39 @@
+{
+    "title": "Message",
+    "context": {
+        "messageText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
+        "modifier": "--info"
+    },
+    "variants": [
+        {
+            "name": "Information",
+            "context": {
+                "modifier": "--info"
+            }
+        },
+        {
+            "name": "Warning",
+            "context": {
+                "modifier": "--warning"
+            }
+        },
+        {
+            "name": "Error",
+            "context": {
+                "modifier": "--error"
+            }
+        },
+        {
+            "name": "Success",
+            "context": {
+                "modifier": "--success"
+            }
+        },
+        {
+            "name": "Debug",
+            "context": {
+                "modifier": "--debug"
+            }
+        }
+    ]
+}
--- a/components/01_Atoms/message/message.hbs
+++ b/components/01_Atoms/message/message.hbs
@@ -0,0 +1,10 @@
+<div class="LP-Message {{#if modifier}}LP-Message{{modifier}}{{/if}}">
+    <div>
+        <div class="LP-Message__Icon">
+        
+        </div>
+    </div>
+    <div class="LP-Message__Text">
+        {{messageText}}
+    </div>
+</div>
--- a/components/01_Atoms/pagination/_pagination.scss
+++ b/components/01_Atoms/pagination/_pagination.scss
@@ -0,0 +1,92 @@
+.LP-Pagination{
+    font-family: $-primary-sans-serif-font;
+    font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    .LP-Pagination__List{
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .LP-Pagination__Item{
+        margin: 0 4px;
+    
+        &--disabled{
+            color: rgb(182, 182, 182);
+            .LP-Link{
+                color: rgb(182, 182, 182);
+                cursor: default;
+                &:hover{
+                    background-color: unset;
+                    color: unset;
+                }
+            }
+        }
+        
+        &--current{
+
+            .LP-Link{
+                background-color: $-beige;
+
+                &:hover{
+                    background-color: $-beige;
+                    color: $-grey;
+                }
+            }
+        }
+    }
+    
+    .LP-Link{
+        padding: 15px 20px;
+        vertical-align: sub;
+        border-radius: 2px;
+
+        &:active, &:hover{
+            background-color: $-beige;
+            color: $-grey;
+        }
+    }
+
+    .LP-Icon{
+        font-size: larger;
+    }
+}
+
+@media(max-width: $-viewport-normal){
+    .LP-Pagination{
+        .LP-Link{
+            padding: 10px 15px;
+        }
+        .LP-Pagination__Item--other{
+            .LP-Text{
+                display: none;
+            }
+        }
+    }
+}
+
+@media(max-width: $-viewport-small){
+    .LP-Pagination{
+        .LP-Pagination__Item{
+            margin: 0 1px;
+            .LP-Link{
+                padding: 13px 16px;
+            }
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Pagination{
+        .LP-Pagination__Item{
+            .LP-Link{
+                padding: 8px 11px;
+            }
+        }
+    }
+}
--- a/components/01_Atoms/pagination/pagination.config.json
+++ b/components/01_Atoms/pagination/pagination.config.json
@@ -0,0 +1,3 @@
+{
+    "title": "Pagnination"
+}
--- a/components/01_Atoms/pagination/pagination.hbs
+++ b/components/01_Atoms/pagination/pagination.hbs
@@ -0,0 +1,54 @@
+<div class="LP-Pagination">
+    <ul class="LP-Pagination__List">
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--first">
+            <a href="#" class="LP-Link">
+                <span class="LP-Icon">⟪</span>
+                <span class="LP-Text">First</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--disabled LP-Pagination__Item--previous">
+            <a href="#" class="LP-Link">
+                <span class="LP-Icon">⟨</span>
+                <span class="LP-Text">Previous</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">1</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">2</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">3</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--current">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">4</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--neighbor">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">5</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--next">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">Next</span>
+                <span class="LP-Icon">⟩</span>
+            </a>
+        </li>
+        <li class="LP-Pagination__Item LP-Pagination__Item--other LP-Pagination__Item--last">
+            <a href="#" class="LP-Link">
+                <span class="LP-Text">Last</span>
+                <span class="LP-Icon">⟫</span>
+
+            </a>
+        </li>
+    </ul>
+</div>
--- a/components/01_Atoms/paragraph/_paragraph.scss
+++ b/components/01_Atoms/paragraph/_paragraph.scss
@@ -2,4 +2,6 @@
    color: black;
    font-family: $-primary-serif-font;
    font-size: 1.2rem;
+    padding: 0;
+    margin: 0;
 }
--- a/components/01_Atoms/paragraph/paragraph.hbs
+++ b/components/01_Atoms/paragraph/paragraph.hbs
@@ -1 +1 @@
-<p class="LP-Paragraph LP-Paragraph{{modifier}}">{{text}}</p>
+<p class="LP-Paragraph{{#if modifier}} LP-Paragraph{{modifier}}{{/if}}">{{text}}</p>
--- a/components/02_Molecules/_molecules.scss
+++ b/components/02_Molecules/_molecules.scss
@@ -2,3 +2,4 @@
@import 'placeTeaser/placeTeaser';
@import 'tagList/tagList';
@import 'navigation/navigation';
+@import 'messageList/messageList';
--- a/components/02_Molecules/messageList/_messageList.scss
+++ b/components/02_Molecules/messageList/_messageList.scss
@@ -0,0 +1,15 @@
+.LP-MessageList{
+    padding: 25px;
+    .LP-MessageList__List{
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .LP-MessageList__Item{
+        margin: 5px 0;
+    }
+}
--- a/components/02_Molecules/messageList/messageList.config.json
+++ b/components/02_Molecules/messageList/messageList.config.json
@@ -0,0 +1,6 @@
+{
+    "title": "Message List",
+    "context": {
+        "text": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+    }
+}
--- a/components/02_Molecules/messageList/messageList.hbs
+++ b/components/02_Molecules/messageList/messageList.hbs
@@ -0,0 +1,9 @@
+<div class="LP-MessageList">
+    <ul class="LP-MessageList__List">
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--info'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--warning'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--error'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--success'}}</li>
+        <li class="LP-MessageList__Item">{{> @message messageText=text modifier='--debug'}}</li>
+    </ul>
+</div>
--- a/components/02_Molecules/navigation/_navigation.scss
+++ b/components/02_Molecules/navigation/_navigation.scss
@@ -1,19 +1,23 @@
 .LP-Menu{
+    border-left: 1px solid $-light-brown;
    .LP-Menu__List {
        list-style-type: none;
        display: flex;
        flex-direction: row;
-        justify-content: space-between;
+        justify-content: space-around;
        padding: 0;
        margin: 0;
    }
    
    .LP-Menu__Item {
-        padding: 15px 0;
        margin: 0;
-        width: 100px;
        text-align: center;
        background-color: transparent;
+
+        .LP-Link{
+            display: block;
+            padding: 15px 0;
+        }
    }

    .LP-Link__Text {
@@ -24,15 +28,58 @@
            color: $-wine-red;
        }
    }
+
+    &--sidebar{
+        border-top: 1px solid $-light-brown;
+        border-left: none;
+        min-width: 60px;
+        background-color: $-almost-white;
+        padding-top: 25px;
+        
+        .LP-Menu__List{
+            flex-direction: column;
+
+            .LP-Menu__Item{
+                text-align: left;
+                margin-bottom: 10px;
+                padding-left: 25px;
+
+                &--additional{
+                    background-color: #ccc;
+                }
+
+                .LP-Link{
+                    line-height: 1em;
+                }
+                
+                &:last-child{
+                    margin-bottom: 0;
+                }
+
+                &:hover{
+                    border-right: 2px solid $-light-brown;
+                    position: relative;
+                    background-color: $-beige;
+                    color: $-wine-red;
+                }
+            }
+
+        }
+    }
 }

@media(max-width: $-viewport-medium){
    .LP-Menu{
-
+        &:not(&--sidebar){
            .LP-Menu__List{
                display: flex;
                flex-direction: row;
-            justify-content: flex-start
+                justify-content: flex-start;
+
+                .LP-Menu__Item{
+                    flex: 1 1 auto;
+                }
+            }
        }
    }
 }
--- a/components/02_Molecules/navigation/navigation.config.json
+++ b/components/02_Molecules/navigation/navigation.config.json
@@ -1,3 +1,16 @@
 {
-    
+    "title": "Navigation",
+    "context": {
+        "additionalItems": [
+            "Hello"
+        ]
+    },
+    "variants": [
+        {
+            "name": "Sidebar",
+            "context":{
+                "modifier": "--sidebar"
+            }
+        }
+    ]
 }
--- a/components/02_Molecules/navigation/navigation.hbs
+++ b/components/02_Molecules/navigation/navigation.hbs
@@ -1,5 +1,8 @@
-<nav class="LP-Menu">
+<nav class="LP-Menu LP-Menu{{modifier}}">
    <ul class="LP-Menu__List">
+        {{#each additionalItems}}
+            <li class="LP-Menu__Item LP-Menu__Item--additional">{{> @link text=this}}</li>
+        {{/each}}
        <li class="LP-Menu__Item">{{> @link text='Home'}}</li>
        <li class="LP-Menu__Item">{{> @link text='About'}}</li>
        <li class="LP-Menu__Item">{{> @link text='Contact'}}</li>
--- a/components/02_Molecules/placeTeaser/_placeTeaser.scss
+++ b/components/02_Molecules/placeTeaser/_placeTeaser.scss
@@ -17,7 +17,9 @@
        display: flex;
        align-items: center;
        justify-content: space-between;
+        padding: 5px;
        padding-bottom: 10px;
+        padding-top: 10px;
        
        .LP-Paragraph{
            font-family: $-primary-sans-serif-font;
--- a/components/02_Molecules/textSection/textSection.hbs
+++ b/components/02_Molecules/textSection/textSection.hbs
@@ -1,4 +1,8 @@
 <article class="LP-TextSection">
+    <header class="LP-TextSection__Headline">
        {{> @headline headline=headline}}
+    </header>
+    <div class="LP-TextSection__Text">
        {{> @paragraph text=text}}
+    </div>
 </article>
--- a/components/03_Organisms/_organisms.scss
+++ b/components/03_Organisms/_organisms.scss
@@ -4,3 +4,4 @@
@import 'linkList/linkList';
@import 'footer/footer';
@import 'form/form';
+@import 'imageGrid/imageGrid';
--- a/components/03_Organisms/form/_form.scss
+++ b/components/03_Organisms/form/_form.scss
@@ -1,6 +1,22 @@
 .LP-Form{
+    flex-direction: column;
+    align-items: center;
+
+	&--inline{
+		padding: 0 10px;
+		.LP-Form__Fieldset{
+			.LP-Form__Composition{
+				gap: 10px;
+			}
+		}
+	}
+
    .LP-Form__Fieldset{
        border: none;
+		padding: 0;
+		margin: 0;
+        max-width: 1200px;
+        min-width: $-viewport-medium;

        .LP-Form__Legend{
            margin: 0;
@@ -9,31 +25,70 @@
            font-size: 21px;
        }

+	}
+	
 	.LP-Form__Composition{
 		display: flex;
 		flex-direction: row;
 		justify-content: space-between;
+		gap: 30px;
+
+		&--buttons{
+			gap: 10px;
+		}
 		
 		.LP-Form__Field{
-                flex: 3 1 100px;
-                padding: 6px 15px;
+			flex: 3 2 100px;
+			padding: 6px 0;

 			&--wider{
-                    flex: 5 1;
+				flex: 5 2;
 			}

 			&--wide{
-                    flex: 4 1;
+				flex: 4 2;
 			}

 			&--narrow{
-                    flex: 2 0;
+				flex: 2 1;
 			}

 			&--narrower{
-                    flex: 1 0;
+				flex: 1 2;
+			}
+			
+			&--static{
+				flex: 0 0;
 			}
 		}
+
+		&--buttons{
+			justify-content: flex-end;
+		}
+
+		.LP-Form__Button{
+			flex-grow: 0;
+			padding-left: 0;
+			min-width: 130px;
+
+			.LP-Link{
+				display:contents;
+			}
+		}
+		
+		.LP-Form__InfoText{
+			.LP-Paragraph{
+			font-family: $-primary-sans-serif-font;
+			color: $-grey;
+			}
+		}
+	}
+}
+
+@media(max-width: $-viewport-medium){
+.LP-Form{
+    .LP-Form__Fieldset{
+        min-width: unset;
    }
 }
 }
@@ -51,7 +106,7 @@
 }

@media(max-width: $-viewport-extra-small){
-    .LP-Form{
+    .LP-Form :not(.LP-Form--inline){
        .LP-Form__Fieldset{
            .LP-Form__Composition{
                display: flex;
@@ -59,10 +114,21 @@
                justify-content: space-between;

                .LP-Form__Field{
+                    
+                    &:not(.LP-Form__Button){
                        flex: 3 1 100px;
                        padding: 12px 15px;
                    }
                }
+                
+                .LP-Form__Button{
+                    padding: 0 15px;
+                }
+                
+                &--buttons{
+                    justify-content: flex-end;
+                }
+            }
        }
    }
 }
--- a/components/03_Organisms/form/form.hbs
+++ b/components/03_Organisms/form/form.hbs
@@ -37,6 +37,12 @@
            </div>
        </div>

+        <div class="LP-Form__Composition">
+            <div class="LP-Form__Field LP-Form__InfoText">
+                <p class="LP-Paragraph">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
+            </div>
+        </div>
+
        <div class="LP-Form__Composition">
            <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
                <label for="input123" class="LP-Input__Label">Postal Code</label>
@@ -48,5 +54,14 @@
            </div>
        </div>

+        <div class="LP-Form__Composition LP-Form__Composition--buttons">
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
+                <input type="submit" class="LP-Button" value="Submit"/>
+            </div>
+            <div class="LP-Form__Field LP-Form__Button LP-Input LP-Input">
+                <button class="LP-Button LP-Button--cancel">Kenschäll</button>
+            </div>
+        </div>
+
    </fieldset>
 </form>
--- a/components/03_Organisms/header/_header.scss
+++ b/components/03_Organisms/header/_header.scss
@@ -1,26 +1,49 @@
+
+$-logo-height: 45px;
 .LP-Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    margin-bottom: 70px;
    height: 60px;
+    box-shadow: 0 0 2px $-light-brown;
+    grid-area: header;
+    background-color: white;
+    padding-left: 25px;
+
+    &__Navigation{
+        flex-grow: 2;
+    }
    
    &__Logo {
-        height: 60px;
-        margin: 25px;
+        height: $-logo-height;
        object-fit:cover;
        max-height: 100%;
+        width: 225px;
        overflow: hidden;
+        flex-shrink: 0;

        .LP-Image{
-            height: 60px;
+            height: 100%;
        }
    }
 }

+.LP-Header__UserInformation{
+    margin-right: 3%;
+    .LP-Paragraph{
+        font-family: $-primary-sans-serif-font;
+        white-space: nowrap;
+    }
+
+    .LP-Link{
+        margin: 0 3px;
+        padding: 4px 4px;
+    }
+}
+
@media(max-width: $-viewport-medium){
    .LP-Header__Logo{
-        width: 60px;
+        width: $-logo-height;
        .LP-Image{
            object-position: 0 0;
            object-fit: cover;
@@ -37,3 +60,12 @@
        width: 100%;
    }
 }
+
+@media(max-width: $-viewport-toggle-sidebar){
+    .LP-Header{
+        padding-left: 60px;
+        width: calc(100% - 60px);
+        position: fixed;
+        z-index: 10;
+    }
+}
--- a/components/03_Organisms/header/header.hbs
+++ b/components/03_Organisms/header/header.hbs
@@ -2,7 +2,9 @@
    <div class="LP-Header__Logo">
        {{> @image source='/images/logo.png'}}
    </div>
-    <div class="LP-Header__Navigation">
-        {{> @navigation}}
+    <div class="LP-Header__UserInformation">
+        <span class="LP-Paragraph">
+            Hi there!{{> @link url="#" text="Login"}} or {{> @link url="#" text="Sign up"}}
+            </span>
    </div>
 </header>
--- a/components/03_Organisms/imageGrid/_imageGrid.scss
+++ b/components/03_Organisms/imageGrid/_imageGrid.scss
@@ -0,0 +1,42 @@
+.LP-ImageGrid{
+
+    .LP-ImageGrid__List{
+        list-style-type: none;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, 300px);
+        align-content: space-around;
+        justify-content: center;
+        margin: 0px;
+        padding: 0px;
+    }
+
+    .LP-ImageGrid__Item{
+        margin-top:10px;
+    }
+
+    .LP-Link{
+        overflow: hidden;
+    }
+
+    .LP-Image {
+        box-shadow: 0 0 5px $-grey;
+        height: 200px;
+        width: 290px;
+        object-fit: cover;
+    }
+}
+
+@media(max-width: $-viewport-small){
+    .LP-ImageGrid{
+        .LP-ImageGrid__List{
+            grid-template-columns: 1fr;
+
+            .LP-Image{
+                box-shadow: 0 0 5px $-grey;
+                height: auto;
+                width: 100%;
+                object-fit: cover;
+            }
+        }
+    }
+}
--- a/components/04_Templates/placeOverview/placeOverview.config.json
+++ b/components/04_Templates/placeOverview/placeOverview.config.json
--- a/components/03_Organisms/imageGrid/imageGrid.hbs
+++ b/components/03_Organisms/imageGrid/imageGrid.hbs
@@ -0,0 +1,10 @@
+
+<div class="LP-ImageGrid">
+    <ul class="LP-ImageGrid__List">
+        {{#each images}}
+        <li class="LP-ImageGrid__Item">
+            <a href="#" class="LP-Link"><img  class="LP-Image" src="{{this}}"></a>
+        </li>
+        {{/each}}
+    </ul>
+</div>
--- a/components/03_Organisms/linkList/_linkList.scss
+++ b/components/03_Organisms/linkList/_linkList.scss
@@ -7,13 +7,44 @@

    .LP-LinkList__Item{
        border-left: 1px solid $-light-brown;
-        width: 100%;
+        width: calc(100% - 1px);
        margin-top: 12px;
+        position: relative;
+
+        &--add{
+            .LP-LinkList__AddTrigger{
+				display: none;
+				&:checked{
+					& ~ .LP-LinkList__AddPlaceHolder{
+						visibility: hidden;
+					}
+					& ~ .LP-LinkList__Add{
+					display: block;
+					}
+				}
+            }
+            
+            .LP-LinkList__Add{
+                position: absolute;
+                top: 3px;
+				display: none;
+				width: 100%;
+
+                .LP-Form__Fieldset{
+                    min-width:unset;
+                }
+
+                .LP-Form{
+                    display: block;
+                    min-width: 0px;
+                }
+            }
+        }

        .LP-Link{
            $-link-padding: 1em;
            padding: $-link-padding 0 $-link-padding $-link-padding;
-            width: calc(100% - $-link-padding);
+            width: calc(100% - 1em);
            display: block;
            color: $-grey;

--- a/components/03_Organisms/linkList/linkList.hbs
+++ b/components/03_Organisms/linkList/linkList.hbs
@@ -1,10 +1,15 @@
+
+<div class="LP-LinkList">
    <ul class="LP-LinkList__List">
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
-    <li class="LP-LinkList__Item"><a href="#" class="LP-Link LP-Link--iconized">
+        <li class="LP-LinkList__Item LP-LinkList__Item--add">
+            <input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
+            <label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
+				<span class="LP-Link LP-Link--iconized">
 					<div class="LP-Link__IconWrapper">
 					<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
 						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
@@ -15,5 +20,24 @@
 						</g>
 					</svg>
 					</div>
-        <span class="LP-Text">Link hinzufügen</span></a></li>
+					<span class="LP-Text">Link hinzufügen</span>
+				</span>
+            </label>
+			<span class="LP-LinkList__Add">
+				<form class="LP-Form LP-Form--inline">
+					<fieldset class="LP-Form__Fieldset">
+						<div class="LP-Form__Composition LP-Form__Composition">
+							<div class="LP-Form__Field LP-Form__Field--static LP-Input">
+								<button class="LP-Button">Add</button>
+							</div>
+							<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
+								<input class="LP-Input__Field" type="url"/>
+							</div>
+							</div>
+						</div>
+					</fieldset>
+				</form>
+			</span>
+        </li>
    </ul>
+</div>
--- a/components/03_Organisms/placeList/_placeList.scss
+++ b/components/03_Organisms/placeList/_placeList.scss
@@ -21,8 +21,12 @@
    
        .LP-PlaceList__Item{
            max-width: 900px;
-			min-width: 450px;
+            //min-width: 450px;
            margin: 18px 0;
        }
    }
+    
+    .LP-Pagination{
+        margin-top: 50px;
+    }
 }
--- a/components/03_Organisms/placeList/placeList.hbs
+++ b/components/03_Organisms/placeList/placeList.hbs
@@ -9,4 +9,5 @@
            </li>
        {{/each}}
    </ul>
+    {{> @pagination}}
 </div>
--- a/components/04_Templates/_templates.scss
+++ b/components/04_Templates/_templates.scss
@@ -1,2 +1,2 @@
@import 'home/home';
-@import 'placeOverview/placeOverview';
+@import 'placeDetail/placeDetail';
--- a/components/04_Templates/placeDetail/_placeDetail.scss
+++ b/components/04_Templates/placeDetail/_placeDetail.scss
@@ -0,0 +1,35 @@
+.LP-PlaceDetail{
+
+    .LP-PlaceDetail__Image{
+        width: 700px;
+        max-height: 500px;
+        box-shadow: 0 0 10px $-grey;
+        object-fit: cover;
+        object-position: 0 0;
+
+        margin: 0;
+        padding: 0;
+
+        float: right;
+        margin-left: 35px;
+        margin-bottom: 35px;
+        margin-right: 35px;
+        overflow: hidden;
+    }
+}
+
+@media (max-width: $-viewport-normal){
+    .LP-PlaceDetail{
+        .LP-PlaceDetail__Header{
+            .LP-PlaceDetail__Image{
+                float: none;
+                width: 100%;
+                height: auto;
+                margin: 0;
+                padding: 0;
+                
+                margin-bottom: 25px;
+            }
+        }
+    }
+}
--- a/components/04_Templates/placeDetail/placeDetail.config.json
+++ b/components/04_Templates/placeDetail/placeDetail.config.json
@@ -0,0 +1,21 @@
+{
+    "context": {
+        "tags": [
+            "Kamera",
+            "Wachhund",
+            "Zaun",
+            "Security"
+        ],
+        "images": [
+            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+            "/images/photo_2020-05-02_18-11-21.jpg",
+            "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+            "/images/photo_2020-05-02_18-11-21.jpg",
+            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"
+        ],
+        "additionalItems": [
+            "Edit Place",
+            "Delete Place"
+        ]
+    }
+}
--- a/components/04_Templates/placeDetail/placeDetail.hbs
+++ b/components/04_Templates/placeDetail/placeDetail.hbs
@@ -0,0 +1,26 @@
+<article class="LP-PlaceDetail">
+
+    <header class="LP-PlaceDetail__Header">
+        {{> @headline--main headline='Kokerei Wiescherhöfen'}}
+        <figure class="LP-PlaceDetail__Image">
+            {{> @image source='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png'}}
+        </figure>
+    </header>
+
+    <div class="LP-PlaceDetail__Description">
+        {{> @paragraph text='Lorem ipsum dolor sit amet, '}}
+    </div>
+
+    <section class="LP-Section">
+        {{> @headline headline='Sicherheitsmaßnahmen'}}
+        {{> @taglist}}
+    </section>
+    <section class="LP-Section">
+        {{> @headline headline='Links'}}
+        {{> @linklist}}
+    </section>
+    <section class="LP-Section">
+        {{> @headline headline='Bilder'}}
+        {{> @imagegrid images=images}}
+    </section>
+</article>
--- a/components/04_Templates/placeOverview/_placeOverview.scss
+++ b/components/04_Templates/placeOverview/_placeOverview.scss
@@ -1,69 +0,0 @@
-.LP-PlaceOverview{
-    .LP-PlaceOverview__Info{
-
-        .LP-PlaceOveriew__Image{
-            width: 700px;
-            box-shadow: 0 0 10px $-grey;
-            object-fit: cover;
-            object-position: 0 0;
-
-            float: right;
-            margin-left: 35px;
-            margin-bottom: 35px;
-            overflow: hidden;
-        }
-        .LP-PlaceOverView__Description{
-            padding: 0px;
-            position: relative;
-            top: -15px;
-
-            .LP-Headline{
-                position: relative;
-                top: 15px;
-            }
-        }
-    }
-
-    .LP-PlaceOverView__ImageList{
-        list-style-type: none;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        margin: 0px;
-        padding: 0px;
-
-        .LP-PlaceOverView__ImageItem{
-            margin-top:10px;
-
-            .LP-Link{
-                overflow: hidden;
-            }
-
-            .LP-Image {
-                box-shadow: 0 0 5px $-grey;
-                height: 200px;
-                width: 290px;
-                object-fit: cover;
-            }
-        }
-    }
-
-}
-
-@media (max-width: $-viewport-normal){
-    .LP-PlaceOverview{
-        .LP-PlaceOverview__Info{
-
-            .LP-TextSection{
-                margin-top: 30px;
-            }
-
-            .LP-PlaceOveriew__Image{
-                float: none;
-                width: 100%;
-                height: auto;
-                margin: 0;
-                padding: 0;
-            }
-        }
-    }
-}
--- a/components/04_Templates/placeOverview/placeOverview.hbs
+++ b/components/04_Templates/placeOverview/placeOverview.hbs
@@ -1,47 +0,0 @@
-<article class="LP-PlaceOverview">
-    <div class="LP-PlaceOverview__Info">
-        <div class="LP-PlaceOveriew__Image">
-            {{> @image source='/images/Bildschirmfoto_von_2020-07-13_20-15-00.png'}}
-        </div>
-        <article class="LP-PlaceOverView__Description">
-            <div class="LP-TextSection">
-            {{> @headline--main headline='Kokerei Wiescherhöfen'}}
-            {{> @paragraph text='Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb. My moneys in that office, right? If she start giving me some bullshit about it aint there, and we got to go someplace else and get it, Im gonna shoot you in the head then and there. Then Im gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when Im talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
-
-Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb.Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb. My moneys in that office, right? If she start giving me some bullshit about it aint there, and we got to go someplace else and get it, Im gonna shoot you in the head then and there. Then Im gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when Im talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
-
-Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, thats what you see at a toy store. And you must think youre in a toy store, because youre here shopping for an infant named Jeb.'}}
-</div>
-        </article>
-    </div>
-    <article>
-        {{> @headline headline='Sicherheitsmaßnahmen'}}
-        <div class="LP-Content__Wrapper">
-            <div class="LP-Content">
-                {{> @taglist}}
-            </div>
-        </div>
-    </article>
-    <article>
-        {{> @headline headline='Links'}}
-        <div class="LP-Content__Wrapper">
-            <div class="LP-Content">
-                {{> @linklist}}
-            </div>
-        </div>
-    </article>
-    <article class="">
-        {{> @headline headline='Bilder'}}
-        <div class="LP-Content__Wrapper">
-            <div class=" LP-Content">
-                <ul class="LP-PlaceOverView__ImageList">
-                    {{#each images}}
-                    <li class="LP-PlaceOverView__ImageItem">
-                        <a href="#" class="LP-Link"><img  class="LP-Image" src="{{this}}"></a>
-                    </li>
-                    {{/each}}
-                </ul>
-            </div>
-        </div>
-    </article>
-</article>
--- a/components/05_Pages/_pages.scss
+++ b/components/05_Pages/_pages.scss
@@ -0,0 +1 @@
+@import 'place/place';
--- a/components/05_Pages/place/_place.scss
+++ b/components/05_Pages/place/_place.scss
--- a/components/05_Pages/place/place.config.json
+++ b/components/05_Pages/place/place.config.json
@@ -0,0 +1,22 @@
+{
+    "title": "PlaceDetail",
+    "context": {
+        "tags": [
+            "Kamera",
+            "Wachhund",
+            "Zaun",
+            "Security"
+        ],
+        "images": [
+            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png",
+            "/images/photo_2020-05-02_18-11-21.jpg",
+            "/images/Bildschirmfoto_von_2020-07-13_20-15-00.png",
+            "/images/photo_2020-05-02_18-11-21.jpg",
+            "/images/Bildschirmfoto_von_2020-07-13_11-03-07.png"
+        ],
+        "additionalItems": [
+            "Edit Place",
+            "Delete Place"
+        ]
+    }
+}
--- a/components/05_Pages/place/place.hbs
+++ b/components/05_Pages/place/place.hbs
@@ -0,0 +1,11 @@
+<div class="LP-Wrapper__Site">
+    {{> @header}}
+    <input id="toggle_sidebar" class="LP-Menu__Trigger" type="checkbox"/>
+    <label id="toggle_sidebar_label" for="toggle_sidebar" class="LP-Menu__TriggerLabel"></label>
+    <aside class="LP-Main__Sidebar">
+        {{> @navigation modifier='--sidebar'}}
+    </aside>
+    <main class="LP-Main__Content">
+        {{> @placedetail}}
+    </main>
+</div>
--- a/components/_preview.hbs
+++ b/components/_preview.hbs
@@ -2,7 +2,7 @@
 <html lang="en">
    <head>
        <meta charset="UTF-8">
-        <link rel="stylesheet" href="{{ path '/components.css' }}">
+        <link rel="stylesheet" href="{{ path '/main.css' }}">
        <title>Preview</title>
    </head>
    <body>
--- a/components/components.scss
+++ b/components/components.scss
@@ -1,38 +0,0 @@
-@font-face {
-    font-family: Crimson;
-    src:
-        url('fonts/Crimson/CrimsonText-Regular.ttf'),
-        url('fonts/Crimson/CrimsonText-Bold.ttf'),
-        url('fonts/Crimson/CrimsonText-Italic.ttf')
-        ;
-  }
-
-  @font-face {
-    font-family: Montserrat;
-    src:
-        url('fonts/Montserrat/Montserrat-Regular.otf'),
-        url('fonts/Montserrat/Montserrat-Bold.otf'),
-        url('fonts/Montserrat/Montserrat-Italic.otf')
-        ;
-  }
-
-$-beige: #D7CEC7;
-$-grey: #565656;
-$-wine-red: #76323F;
-$-light-brown: #C09F80;
-$-almost-white: #f9f9f9;
-
-$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
-$-primary-serif-font: Crimson, Times, serif;
-$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
-
-$-viewport-small: 650px;
-$-viewport-extra-small: 450px;
-$-viewport-medium: 750px;
-$-viewport-normal: 1000px;
-
-
-@import '01_Atoms/atoms';
-@import '02_Molecules/molecules';
-@import '03_Organisms/organisms';
-@import '04_Templates/templates';
--- a/components/main.scss
+++ b/components/main.scss
@@ -0,0 +1,162 @@
+@font-face {
+    font-family: Crimson;
+    src:
+        url('fonts/Crimson/CrimsonText-Regular.ttf'),
+        url('fonts/Crimson/CrimsonText-Bold.ttf'),
+        url('fonts/Crimson/CrimsonText-Italic.ttf')
+        ;
+  }
+
+  @font-face {
+    font-family: Montserrat;
+    src:
+        url('fonts/Montserrat/Montserrat-Regular.ttf'),
+        url('fonts/Montserrat/Montserrat-Bold.ttf'),
+        url('fonts/Montserrat/Montserrat-Italic.ttf')
+        ;
+  }
+
+$-beige: #D7CEC7;
+$-grey: #565656;
+$-wine-red: #76323F;
+$-light-brown: #C09F80;
+$-almost-white: #f9f9f9;
+
+$-primary-sans-serif-font: Montserrat, Helvetica, sans-serif;
+$-primary-serif-font: Crimson, Times, serif;
+$-primary-sans-serif-accent-font: Roboto, Arial, sans-serif;
+
+$-viewport-extra-small: 450px;
+$-viewport-small: 650px;
+$-viewport-medium: 750px;
+$-viewport-normal: 1000px;
+
+$-viewport-toggle-sidebar: $-viewport-small;
+
+$-sidebar-width: 250px;
+
+html{
+  height:100%;
+  margin: 0;
+  padding: 0;
+}
+
+body{
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.LP-Wrapper__Site{
+    display: grid;
+    grid-template-columns: $-sidebar-width 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "header header" "sidebar content";
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+}
+
+.LP-Main__Content{
+        min-height: 1px;
+        padding: 25px;
+        grid-area: content;
+}
+
+.LP-Main__Sidebar{
+    grid-area: sidebar;
+    background-color: #f9f9f9;
+}
+
+.LP-Section{
+    clear: both;
+    padding: 25px 0px;
+    padding-left: 25px;
+
+    .LP-Headline{
+        margin-left: -25px;
+    }
+}
+
+.LP-Menu__Trigger{
+    display: none;
+}
+
+@media(max-width: $-viewport-normal){
+    .LP-Wrapper__Site{
+        grid-template-columns: (0.75 * $-sidebar-width) 1fr;
+    }
+}
+
+@media(max-width: $-viewport-small){
+    .LP-Section{
+        padding-left: 0;
+        padding-right: 0;
+
+        .LP-Headline{
+            margin: 0;
+        }
+    }
+}
+
+@media(max-width: $-viewport-extra-small){
+    .LP-Main__Sidebar{
+        max-width: 100vw;
+    }
+}
+
+@media(max-width: $-viewport-toggle-sidebar){
+    .LP-Wrapper__Site{
+        grid-template-columns: 0 1fr;
+    }
+
+    .LP-Main__Sidebar{
+        grid-area:unset;
+        width: $-sidebar-width;
+        z-index: 15;
+        position: fixed;
+        left: -1 * $-sidebar-width - 1;
+        height: 100vh;
+        top: 60px;
+        border-right: 1px solid $-light-brown;
+        transition: left 0.3s;
+
+        &--hidden{
+            visibility: hidden;
+        }
+    }
+
+    #toggle_sidebar:checked ~ .LP-Main__Sidebar{
+        left: 0 ;
+    }
+
+    #toggle_sidebar ~ .LP-Main__Sidebar{
+        left: -1 * $-sidebar-width - 1;
+    }
+
+    .LP-Menu__TriggerLabel{
+        z-index: 20;
+        height: 60px;
+        width: 60px;    
+        background-image: url('icons/hamburger_menu.svg');
+        background-repeat: no-repeat;
+        background-clip: content-box;
+        background-position: center;
+        position: fixed;
+    }
+
+    .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel{
+        background-color: invert($-grey);
+        filter: invert(1);
+    }
+
+    .LP-Main__Content{
+        margin-top: 60px;
+    }
+}
+
+@import '01_Atoms/atoms';
+@import '02_Molecules/molecules';
+@import '03_Organisms/organisms';
+@import '04_Templates/templates';
+@import '05_Pages/pages';
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,10 +3,12 @@
    "version": "0.1.0",
    "dependencies": {
        "@frctl/fractal": "^1.2.1",
-        "node-sass": "^4.13.1"
+        "fractal": "0.0.3",
+        "node-sass": "^4.14.1",
+        "sass": "^1.26.10"
    },
    "scripts": {
-        "sass": "node-sass -w components/components.scss -o public/ --recursive",
+        "sass": "node-sass -w components/main.scss -o public/ --recursive",
        "styleguide": "fractal start --sync",
        "suite": "npm run sass & npm run styleguide"
    }
--- a/public/components.css
+++ b/public/components.css
@@ -1,469 +0,0 @@
-@font-face {
-  font-family: Crimson;
-  src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
-
-@font-face {
-  font-family: Montserrat;
-  src: url("fonts/Montserrat/Montserrat-Regular.otf"), url("fonts/Montserrat/Montserrat-Bold.otf"), url("fonts/Montserrat/Montserrat-Italic.otf"); }
-
-.LP-Link {
-  color: #565656;
-  text-decoration: none;
-  font-family: Roboto, Arial, sans-serif; }
-  .LP-Link:hover {
-    color: #C09F80; }
-  .LP-Link .LP-Text {
-    font-family: Roboto, Arial, sans-serif; }
-    .LP-Link .LP-Text:hover {
-      color: #C09F80; }
-
-.LP-Link__IconWrapper {
-  display: inline; }
-
-.LP-Headline {
-  font-family: Montserrat, Helvetica, sans-serif;
-  color: #565656;
-  font-size: 1.7rem;
-  padding-top: 0px;
-  margin-top: 0px;
-  padding-bottom: 0px;
-  margin-bottom: 0px; }
-  .LP-Headline--main {
-    position: relative;
-    top: 2rem;
-    font-size: 2rem; }
-  .LP-Headline--inline {
-    display: inline; }
-
-.LP-Paragraph {
-  color: black;
-  font-family: Crimson, Times, serif;
-  font-size: 1.2rem; }
-
-.LP-Icon {
-  height: 20px;
-  width: 20px; }
-
-.LP-Icon__List {
-  list-style-type: none;
-  display: inline-flex;
-  justify-content: space-between;
-  justify-items: stretch;
-  padding: 0; }
-  .LP-Icon__List .LP-Icon__Item {
-    padding: 0 3px; }
-
-.LP-Button {
-  background-color: #C09F80;
-  color: #565656;
-  border: none;
-  padding: 8px 14px;
-  border-radius: 2px;
-  font-weight: bold; }
-  .LP-Button:active {
-    background-color: #76323F;
-    color: #f9f9f9; }
-  .LP-Button--cancel {
-    background-color: #f9f9f9; }
-
-.LP-Form .LP-Form__Checkbox {
-  display: none; }
-
-.LP-Form .LP-Form__CheckBox__CheckMark {
-  height: 1em;
-  width: 1em;
-  border: 1px solid black;
-  padding: 0 calc(.5em + 2px);
-  margin-right: .7em; }
-
-.LP-Input {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: -30px;
-  padding: 10px 0; }
-  .LP-Input .LP-Input__Field {
-    border: none;
-    border-bottom: 1px solid #565656;
-    padding: 8px;
-    margin-bottom: 30px; }
-    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
-      margin-bottom: 29px;
-      border-bottom: 2px solid #76323F;
-      background-color: #f9f9f9;
-      border-radius: 3px 3px 0 0;
-      box-shadow: none; }
-  .LP-Input .LP-Input__Label {
-    font-family: Montserrat, Helvetica, sans-serif;
-    font-size: 16px; }
-  .LP-Input .LP-Input__Message {
-    font-family: Montserrat, Helvetica, sans-serif;
-    font-style: italic;
-    font-size: 13px;
-    padding: 3px;
-    position: relative;
-    top: -30px; }
-  .LP-Input--error .LP-Input__Field {
-    margin-bottom: 25px;
-    border-bottom: 2px solid #76323F;
-    margin-bottom: 29px; }
-  .LP-Input--error .LP-Input__Message {
-    color: #76323F; }
-  .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled {
-    background-color: transparent;
-    border-bottom: 1px dashed #565656;
-    cursor: not-allowed; }
-    label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled {
-      color: red; }
-    .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active {
-      margin-bottom: 30px;
-      border-radius: 0; }
-    .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message {
-      visibility: hidden; }
-  .LP-Input--disabled .LP-Input__Label {
-    color: #565656; }
-
-.LP-Image {
-  object-fit: cover;
-  width: 100%;
-  height: auto;
-  vertical-align: top; }
-
-.LP-Logo {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  object-fit: contain; }
-
-.LP-Tag {
-  padding: 8px 14px;
-  background-color: #D7CEC7;
-  border-radius: 2px;
-  width: max-content; }
-  .LP-Tag .LP-Paragraph {
-    padding: 0;
-    margin: 0;
-    font-family: Montserrat, Helvetica, sans-serif;
-    font-size: 1em;
-    display: inline; }
-
-.LP-Content {
-  padding: 35px; }
-
-@media (max-width: 1290px) {
-  .LP-Content {
-    padding: 15px; } }
-
-.LP-TextSection .LP-Text {
-  line-height: 1.4rem; }
-
-.LP-PlaceTeaser {
-  width: 280px; }
-  .LP-PlaceTeaser .LP-PlaceTeaser__Image {
-    height: 165px;
-    width: 280px;
-    overflow: hidden; }
-    .LP-PlaceTeaser .LP-PlaceTeaser__Image .LP-Image {
-      max-width: unset;
-      max-height: unset;
-      object-fit: cover; }
-  .LP-PlaceTeaser .LP-PlaceTeaser__Meta {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-bottom: 10px; }
-    .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Paragraph {
-      font-family: Montserrat, Helvetica, sans-serif;
-      padding: 0;
-      margin: 0;
-      margin-top: 5px;
-      font-size: 0.9rem; }
-    .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Headline {
-      font-family: Montserrat, Helvetica, sans-serif;
-      color: #565656;
-      font-size: 1rem;
-      padding: 0px;
-      margin: 0px; }
-  .LP-PlaceTeaser .LP-PlaceTeaser__Description {
-    font-family: Roboto, Arial, sans-serif;
-    color: #565656;
-    display: none; }
-
-@media (min-width: 650px) {
-  .LP-PlaceTeaser--extended {
-    display: flex;
-    flex-direction: row;
-    width: auto;
-    padding-right: 25px;
-    height: 165px; }
-    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta {
-      margin: 0;
-      padding: 5px;
-      padding-left: 25px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: flex-start; }
-      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
-        font-size: 28px; }
-      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons {
-        margin-top: auto; }
-        .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons ul {
-          padding: 0;
-          margin: 0; }
-    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description {
-      display: block;
-      max-height: 55px;
-      overflow: hidden; }
-    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
-      height: 165px;
-      width: 280px;
-      flex-shrink: 0;
-      flex-grow: 0; } }
-
-.LP-TagList .LP-TagList__List {
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-  margin: 0; }
-  .LP-TagList .LP-TagList__List .LP-TagList__Item {
-    margin: 6px; }
-
-.LP-Menu .LP-Menu__List {
-  list-style-type: none;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 0;
-  margin: 0; }
-
-.LP-Menu .LP-Menu__Item {
-  padding: 15px 0;
-  margin: 0;
-  width: 100px;
-  text-align: center;
-  background-color: transparent; }
-
-.LP-Menu .LP-Link__Text {
-  color: #565656;
-  font-weight: bold;
-  text-shadow: 0px 0px 20px white; }
-  .LP-Menu .LP-Link__Text:hover {
-    color: #76323F; }
-
-@media (max-width: 750px) {
-  .LP-Menu .LP-Menu__List {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start; } }
-
-@media (max-width: 450px) {
-  .LP-Menu .LP-Menu__List {
-    justify-content: space-between; } }
-
-.LP-Header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 70px;
-  height: 60px; }
-  .LP-Header__Logo {
-    height: 60px;
-    margin: 25px;
-    object-fit: cover;
-    max-height: 100%;
-    overflow: hidden; }
-    .LP-Header__Logo .LP-Image {
-      height: 60px; }
-
-@media (max-width: 750px) {
-  .LP-Header__Logo {
-    width: 60px; }
-    .LP-Header__Logo .LP-Image {
-      object-position: 0 0;
-      object-fit: cover; } }
-
-@media (max-width: 450px) {
-  .LP-Header__Logo {
-    display: none; }
-  .LP-Header__Navigation {
-    width: 100%; } }
-
-.LP-PlaceGrid .LP-PlaceGrid__Grid {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap; }
-  .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
-    margin: 18px; }
-  .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-Link .LP-PlaceTeaser:hover {
-    box-shadow: 0 0 2px #565656; }
-
-.LP-PlaceList .LP-PlaceList__List {
-  list-style-type: none; }
-  .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover {
-    color: #565656;
-    background-color: #f9f9f9;
-    position: relative;
-    left: -2px; }
-    .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover > .LP-Place__Image {
-      border-left: 2px #565656 solid; }
-  .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
-    max-width: 900px;
-    min-width: 450px;
-    margin: 18px 0; }
-
-.LP-LinkList__List {
-  list-style-type: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  margin: 0;
-  padding: 0; }
-  .LP-LinkList__List .LP-LinkList__Item {
-    border-left: 1px solid #C09F80;
-    width: 100%;
-    margin-top: 12px; }
-    .LP-LinkList__List .LP-LinkList__Item .LP-Link {
-      padding: 1em 0 1em 1em;
-      width: calc(100% - $-link-padding);
-      display: block;
-      color: #565656; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized {
-        padding-top: 0;
-        padding-bottom: 1.1em; }
-        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized:hover {
-          background-color: #ccc !important; }
-        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized .LP-Text {
-          padding-top: .1em; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
-        background-color: #f9f9f9;
-        color: #76323F; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link .LP-Text {
-        color: inherit; }
-
-.LP-Link__Icon {
-  width: 2em;
-  height: 2em;
-  fill: #76323F;
-  line-height: 5em; }
-
-.LP-LinkList__Item .LP-Link__Icon {
-  position: relative;
-  top: .7em;
-  margin-right: .6em; }
-
-.LP-Footer {
-  margin-top: 75px;
-  width: 100%;
-  background-color: #565656;
-  padding: 25px; }
-  .LP-Footer .LP-LinkList__List {
-    display: flex;
-    align-items: center;
-    justify-content: center; }
-    .LP-Footer .LP-LinkList__List .LP-LinkList__Item {
-      border: none;
-      padding: 5px;
-      width: auto; }
-      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Text {
-        color: #f9f9f9;
-        font-size: 17px; }
-      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link {
-        display: inline; }
-        .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
-          background-color: inherit; }
-
-.LP-Form .LP-Form__Fieldset {
-  border: none; }
-  .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
-    margin: 0;
-    padding: 0;
-    font-family: Montserrat, Helvetica, sans-serif;
-    font-size: 21px; }
-  .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
-      flex: 3 1 100px;
-      padding: 6px 15px; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider {
-        flex: 5 1; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide {
-        flex: 4 1; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow {
-        flex: 2 0; }
-      .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower {
-        flex: 1 0; }
-
-@media (max-width: 650px) {
-  .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; } }
-
-@media (max-width: 450px) {
-  .LP-Form .LP-Form__Fieldset .LP-Form__Composition {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field {
-      flex: 3 1 100px;
-      padding: 12px 15px; } }
-
-.LP-MainContainer {
-  margin: 0 auto;
-  max-width: 1280px; }
-
-.LP-HorizontalLine {
-  color: #565656; }
-
-@media (max-width: 650px) {
-  .LP-MainContainer {
-    width: 100%; } }
-
-.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
-  width: 700px;
-  box-shadow: 0 0 10px #565656;
-  object-fit: cover;
-  object-position: 0 0;
-  float: right;
-  margin-left: 35px;
-  margin-bottom: 35px;
-  overflow: hidden; }
-
-.LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description {
-  padding: 0px;
-  position: relative;
-  top: -15px; }
-  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOverView__Description .LP-Headline {
-    position: relative;
-    top: 15px; }
-
-.LP-PlaceOverview .LP-PlaceOverView__ImageList {
-  list-style-type: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  margin: 0px;
-  padding: 0px; }
-  .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem {
-    margin-top: 10px; }
-    .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem .LP-Link {
-      overflow: hidden; }
-    .LP-PlaceOverview .LP-PlaceOverView__ImageList .LP-PlaceOverView__ImageItem .LP-Image {
-      box-shadow: 0 0 5px #565656;
-      height: 200px;
-      width: 290px;
-      object-fit: cover; }
-
-@media (max-width: 1000px) {
-  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-TextSection {
-    margin-top: 30px; }
-  .LP-PlaceOverview .LP-PlaceOverview__Info .LP-PlaceOveriew__Image {
-    float: none;
-    width: 100%;
-    height: auto;
-    margin: 0;
-    padding: 0; } }
--- a/public/fonts/Crimson/CrimsonText-BoldItalic.ttf
+++ b/public/fonts/Crimson/CrimsonText-BoldItalic.ttf
--- a/public/fonts/Crimson/CrimsonText-SemiBold.ttf
+++ b/public/fonts/Crimson/CrimsonText-SemiBold.ttf
--- a/public/fonts/Crimson/CrimsonText-SemiBoldItalic.ttf
+++ b/public/fonts/Crimson/CrimsonText-SemiBoldItalic.ttf
--- a/public/fonts/Montserrat/Montserrat-Bold.otf
+++ b/public/fonts/Montserrat/Montserrat-Bold.otf
--- a/public/fonts/Montserrat/Montserrat-Bold.ttf
+++ b/public/fonts/Montserrat/Montserrat-Bold.ttf
--- a/public/fonts/Montserrat/Montserrat-Italic.otf
+++ b/public/fonts/Montserrat/Montserrat-Italic.otf
--- a/public/fonts/Montserrat/Montserrat-Italic.ttf
+++ b/public/fonts/Montserrat/Montserrat-Italic.ttf
--- a/public/fonts/Montserrat/Montserrat-Regular.otf
+++ b/public/fonts/Montserrat/Montserrat-Regular.otf
--- a/public/fonts/Montserrat/Montserrat-Regular.ttf
+++ b/public/fonts/Montserrat/Montserrat-Regular.ttf
--- a/public/icons/debug.png
+++ b/public/icons/debug.png
--- a/public/icons/error.png
+++ b/public/icons/error.png
--- a/public/icons/hamburger_menu.svg
+++ b/public/icons/hamburger_menu.svg
@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>
--- a/public/icons/information.svg
+++ b/public/icons/information.svg
@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z"/></svg>
--- a/public/icons/message.svg
+++ b/public/icons/message.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>Wondicon - UI (Free)</title><path class="cls-1" d="M125,177.86a5,5,0,0,1-4.74-3.42L96,101.76,27.64,77.57a5,5,0,0,1,.2-9.49L169.22,24.53a5,5,0,0,1,6.23,6.3L129.76,174.37a5,5,0,0,1-4.73,3.49ZM45.23,73.19l56.44,20a5,5,0,0,1,3.07,3.13l20.15,60.44L163,36.9Z"/><path class="cls-1" d="M100,102.84a4.94,4.94,0,0,1-3.59-1.52,5,5,0,0,1,.11-7.07L131.86,60a5,5,0,0,1,7,7.18l-35.35,34.26A5,5,0,0,1,100,102.84Z"/><path class="cls-1" d="M75,175.69a5,5,0,0,1-3.19-8.85l25-20.69a5,5,0,0,1,6.38,7.7l-25,20.69A5,5,0,0,1,75,175.69Z"/><path class="cls-1" d="M29.31,175.69a5,5,0,0,1-3.53-8.54l45.68-45.69a5,5,0,0,1,7.08,7.08L32.85,174.22A5,5,0,0,1,29.31,175.69Z"/><path class="cls-1" d="M29.31,130a5,5,0,0,1-3.85-8.19l20.69-25a5,5,0,0,1,7.7,6.38l-20.69,25A5,5,0,0,1,29.31,130Z"/></svg>
--- a/public/icons/success.svg
+++ b/public/icons/success.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><svg style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+    .st0{display:none;}
+</style><g class="st0" id="grid"/><g id="icon"><path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M12,23C5.935,23,1,18.065,1,12S5.935,1,12,1   s11,4.935,11,11S18.065,23,12,23z"/><path d="M16.801,8.403l-6.132,6.133L7.753,11.62c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l3.27,3.27   c0.094,0.094,0.221,0.146,0.354,0.146s0.26-0.053,0.354-0.146l6.485-6.486c0.195-0.195,0.195-0.512,0-0.707   S16.997,8.208,16.801,8.403z"/></g></svg>
--- a/public/main.css
+++ b/public/main.css
@@ -0,0 +1,798 @@
+@font-face {
+  font-family: Crimson;
+  src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
+
+@font-face {
+  font-family: Montserrat;
+  src: url("fonts/Montserrat/Montserrat-Regular.ttf"), url("fonts/Montserrat/Montserrat-Bold.ttf"), url("fonts/Montserrat/Montserrat-Italic.ttf"); }
+
+html {
+  height: 100%;
+  margin: 0;
+  padding: 0; }
+
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0; }
+
+.LP-Wrapper__Site {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: "header header" "sidebar content";
+  margin: 0;
+  padding: 0;
+  min-height: 100vh; }
+
+.LP-Main__Content {
+  min-height: 1px;
+  padding: 25px;
+  grid-area: content; }
+
+.LP-Main__Sidebar {
+  grid-area: sidebar;
+  background-color: #f9f9f9; }
+
+.LP-Section {
+  clear: both;
+  padding: 25px 0px;
+  padding-left: 25px; }
+  .LP-Section .LP-Headline {
+    margin-left: -25px; }
+
+.LP-Menu__Trigger {
+  display: none; }
+
+@media (max-width: 1000px) {
+  .LP-Wrapper__Site {
+    grid-template-columns: 187.5px 1fr; } }
+
+@media (max-width: 650px) {
+  .LP-Section {
+    padding-left: 0;
+    padding-right: 0; }
+    .LP-Section .LP-Headline {
+      margin: 0; } }
+
+@media (max-width: 450px) {
+  .LP-Main__Sidebar {
+    max-width: 100vw; } }
+
+@media (max-width: 650px) {
+  .LP-Wrapper__Site {
+    grid-template-columns: 0 1fr; }
+  .LP-Main__Sidebar {
+    grid-area: unset;
+    width: 250px;
+    z-index: 15;
+    position: fixed;
+    left: -251px;
+    height: 100vh;
+    top: 60px;
+    border-right: 1px solid #C09F80;
+    transition: left 0.3s; }
+    .LP-Main__Sidebar--hidden {
+      visibility: hidden; }
+  #toggle_sidebar:checked ~ .LP-Main__Sidebar {
+    left: 0; }
+  #toggle_sidebar ~ .LP-Main__Sidebar {
+    left: -251px; }
+  .LP-Menu__TriggerLabel {
+    z-index: 20;
+    height: 60px;
+    width: 60px;
+    background-image: url("icons/hamburger_menu.svg");
+    background-repeat: no-repeat;
+    background-clip: content-box;
+    background-position: center;
+    position: fixed; }
+  .LP-Menu__Trigger:checked ~ .LP-Menu__TriggerLabel {
+    background-color: darkgray;
+    filter: invert(1); }
+  .LP-Main__Content {
+    margin-top: 60px; } }
+
+.LP-Link {
+  color: #565656;
+  text-decoration: none;
+  font-family: Montserrat, Helvetica, sans-serif; }
+  .LP-Link:hover {
+    color: #C09F80; }
+  .LP-Link .LP-Paragraph {
+    font-family: Montserrat, Helvetica, sans-serif; }
+    .LP-Link .LP-Paragraph:hover {
+      color: #C09F80; }
+
+.LP-Link__IconWrapper {
+  display: inline; }
+
+.LP-Headline {
+  font-family: Montserrat, Helvetica, sans-serif;
+  color: #565656;
+  font-size: 1.7rem;
+  padding-top: 0px;
+  margin-top: 0px;
+  padding-bottom: 0px;
+  margin-bottom: 25px; }
+  .LP-Headline--main {
+    position: relative;
+    top: 2rem;
+    font-size: 2rem; }
+  .LP-Headline--inline {
+    display: inline; }
+
+.LP-Paragraph {
+  color: black;
+  font-family: Crimson, Times, serif;
+  font-size: 1.2rem;
+  padding: 0;
+  margin: 0; }
+
+.LP-Icon {
+  height: 20px;
+  width: 20px; }
+
+.LP-Icon__List {
+  list-style-type: none;
+  display: inline-flex;
+  justify-content: space-between;
+  justify-items: stretch;
+  padding: 0; }
+  .LP-Icon__List .LP-Icon__Item {
+    padding: 0 3px; }
+
+.LP-Button {
+  background-color: #C09F80;
+  color: #565656;
+  border: none;
+  padding: 8px 14px;
+  border-radius: 2px;
+  font-weight: bold;
+  cursor: pointer; }
+  .LP-Button:active {
+    background-color: #76323F;
+    color: #f9f9f9; }
+  .LP-Button--cancel {
+    background-color: #565656;
+    color: #f9f9f9; }
+    .LP-Button--cancel:active {
+      color: #565656;
+      background-color: #f9f9f9; }
+
+.LP-Form .LP-Form__Checkbox {
+  display: none; }
+
+.LP-Form .LP-Form__CheckBox__CheckMark {
+  height: 1em;
+  width: 1em;
+  border: 1px solid black;
+  padding: 0 calc(.5em + 2px);
+  margin-right: .7em; }
+
+.LP-Input {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: -30px;
+  padding: 10px 0; }
+  .LP-Input .LP-Input__Field {
+    border: none;
+    border-bottom: 1px solid #565656;
+    padding: 8px 0;
+    margin-bottom: 30px; }
+    .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid {
+      margin-bottom: 29px;
+      border-bottom: 2px solid #76323F;
+      background-color: #f9f9f9;
+      border-radius: 3px 3px 0 0;
+      box-shadow: none; }
+    .LP-Input .LP-Input__Field[type=submit] {
+      background-color: #C09F80;
+      color: #565656;
+      border: none;
+      padding: 8px 14px;
+      border-radius: 2px;
+      font-weight: bold;
+      cursor: pointer; }
+      .LP-Input .LP-Input__Field[type=submit]:active {
+        background-color: #76323F;
+        color: #f9f9f9; }
+  .LP-Input .LP-Input__Label {
+    font-family: Montserrat, Helvetica, sans-serif;
+    font-size: 16px; }
+  .LP-Input .LP-Input__Message {
+    font-family: Montserrat, Helvetica, sans-serif;
+    font-style: italic;
+    font-size: 13px;
+    padding: 3px;
+    position: relative;
+    top: -30px; }
+  .LP-Input--error .LP-Input__Field {
+    margin-bottom: 25px;
+    border-bottom: 2px solid #76323F;
+    margin-bottom: 29px; }
+  .LP-Input--error .LP-Input__Message {
+    color: #76323F; }
+  .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled {
+    background-color: transparent;
+    border-bottom: 1px dashed #565656;
+    cursor: not-allowed; }
+    label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled {
+      color: red; }
+    .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active {
+      margin-bottom: 30px;
+      border-radius: 0; }
+    .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message {
+      visibility: hidden; }
+  .LP-Input--disabled .LP-Input__Label {
+    color: #565656; }
+
+.LP-Image {
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+  margin: 0;
+  padding: 0; }
+
+.LP-Logo {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  object-fit: contain; }
+
+.LP-Tag {
+  padding: 8px 14px;
+  background-color: #D7CEC7;
+  border-radius: 2px;
+  width: max-content; }
+  .LP-Tag .LP-Paragraph {
+    padding: 0;
+    margin: 0;
+    font-family: Montserrat, Helvetica, sans-serif;
+    font-size: 1em;
+    display: inline; }
+
+.LP-Message {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: stretch;
+  background-color: #f9f9f9;
+  font-family: Montserrat, Helvetica, sans-serif;
+  border-radius: 3px;
+  font-weight: bold;
+  box-shadow: 0 0 2px #565656;
+  overflow: hidden; }
+  .LP-Message--error .LP-Message__Icon {
+    background-color: #02979e;
+    background-image: url("icons/error.png"); }
+  .LP-Message--warning .LP-Message__Icon {
+    background-color: #0047e7;
+    background-image: url("icons/error.png"); }
+  .LP-Message--info .LP-Message__Icon {
+    background-color: #522719;
+    background-image: url("icons/information.svg"); }
+  .LP-Message--success .LP-Message__Icon {
+    background-color: #6937ff;
+    background-image: url("icons/success.svg"); }
+  .LP-Message--debug .LP-Message__Icon {
+    background-color: #046a2f;
+    background-image: url("icons/debug.png"); }
+  .LP-Message .LP-Message__Icon {
+    background-size: 40px 40px;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 100%;
+    min-height: 50px;
+    width: 50px;
+    filter: invert(1);
+    flex-shrink: 0;
+    flex-grow: 0; }
+  .LP-Message .LP-Message__Text {
+    padding: 0 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 8px; }
+
+.LP-Pagination {
+  font-family: Montserrat, Helvetica, sans-serif;
+  font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  justify-content: center; }
+  .LP-Pagination .LP-Pagination__List {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    padding-left: 0;
+    padding-right: 0; }
+  .LP-Pagination .LP-Pagination__Item {
+    margin: 0 4px; }
+    .LP-Pagination .LP-Pagination__Item--disabled {
+      color: #b6b6b6; }
+      .LP-Pagination .LP-Pagination__Item--disabled .LP-Link {
+        color: #b6b6b6;
+        cursor: default; }
+        .LP-Pagination .LP-Pagination__Item--disabled .LP-Link:hover {
+          background-color: unset;
+          color: unset; }
+    .LP-Pagination .LP-Pagination__Item--current .LP-Link {
+      background-color: #D7CEC7; }
+      .LP-Pagination .LP-Pagination__Item--current .LP-Link:hover {
+        background-color: #D7CEC7;
+        color: #565656; }
+  .LP-Pagination .LP-Link {
+    padding: 15px 20px;
+    vertical-align: sub;
+    border-radius: 2px; }
+    .LP-Pagination .LP-Link:active, .LP-Pagination .LP-Link:hover {
+      background-color: #D7CEC7;
+      color: #565656; }
+  .LP-Pagination .LP-Icon {
+    font-size: larger; }
+
+@media (max-width: 1000px) {
+  .LP-Pagination .LP-Link {
+    padding: 10px 15px; }
+  .LP-Pagination .LP-Pagination__Item--other .LP-Text {
+    display: none; } }
+
+@media (max-width: 650px) {
+  .LP-Pagination .LP-Pagination__Item {
+    margin: 0 1px; }
+    .LP-Pagination .LP-Pagination__Item .LP-Link {
+      padding: 13px 16px; } }
+
+@media (max-width: 450px) {
+  .LP-Pagination .LP-Pagination__Item .LP-Link {
+    padding: 8px 11px; } }
+
+.LP-Content {
+  padding: 35px; }
+
+@media (max-width: 1290px) {
+  .LP-Content {
+    padding: 15px; } }
+
+.LP-TextSection .LP-Text {
+  line-height: 1.4rem; }
+
+.LP-PlaceTeaser {
+  width: 280px; }
+  .LP-PlaceTeaser .LP-PlaceTeaser__Image {
+    height: 165px;
+    width: 280px;
+    overflow: hidden; }
+    .LP-PlaceTeaser .LP-PlaceTeaser__Image .LP-Image {
+      max-width: unset;
+      max-height: unset;
+      object-fit: cover; }
+  .LP-PlaceTeaser .LP-PlaceTeaser__Meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+    padding-bottom: 10px;
+    padding-top: 10px; }
+    .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Paragraph {
+      font-family: Montserrat, Helvetica, sans-serif;
+      padding: 0;
+      margin: 0;
+      margin-top: 5px;
+      font-size: 0.9rem; }
+    .LP-PlaceTeaser .LP-PlaceTeaser__Meta .LP-Headline {
+      font-family: Montserrat, Helvetica, sans-serif;
+      color: #565656;
+      font-size: 1rem;
+      padding: 0px;
+      margin: 0px; }
+  .LP-PlaceTeaser .LP-PlaceTeaser__Description {
+    font-family: Roboto, Arial, sans-serif;
+    color: #565656;
+    display: none; }
+
+@media (min-width: 650px) {
+  .LP-PlaceTeaser--extended {
+    display: flex;
+    flex-direction: row;
+    width: auto;
+    padding-right: 25px;
+    height: 165px; }
+    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta {
+      margin: 0;
+      padding: 5px;
+      padding-left: 25px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-start; }
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Info .LP-Headline {
+        font-size: 28px; }
+      .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons {
+        margin-top: auto; }
+        .LP-PlaceTeaser--extended .LP-PlaceTeaser__Meta .LP-PlaceTeaser__Icons ul {
+          padding: 0;
+          margin: 0; }
+    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Description {
+      display: block;
+      max-height: 55px;
+      overflow: hidden; }
+    .LP-PlaceTeaser--extended .LP-PlaceTeaser__Image {
+      height: 165px;
+      width: 280px;
+      flex-shrink: 0;
+      flex-grow: 0; } }
+
+.LP-TagList .LP-TagList__List {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0; }
+  .LP-TagList .LP-TagList__List .LP-TagList__Item {
+    margin: 6px; }
+
+.LP-Menu {
+  border-left: 1px solid #C09F80; }
+  .LP-Menu .LP-Menu__List {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    padding: 0;
+    margin: 0; }
+  .LP-Menu .LP-Menu__Item {
+    margin: 0;
+    text-align: center;
+    background-color: transparent; }
+    .LP-Menu .LP-Menu__Item .LP-Link {
+      display: block;
+      padding: 15px 0; }
+  .LP-Menu .LP-Link__Text {
+    color: #565656;
+    font-weight: bold;
+    text-shadow: 0px 0px 20px white; }
+    .LP-Menu .LP-Link__Text:hover {
+      color: #76323F; }
+  .LP-Menu--sidebar {
+    border-top: 1px solid #C09F80;
+    border-left: none;
+    min-width: 60px;
+    background-color: #f9f9f9;
+    padding-top: 25px; }
+    .LP-Menu--sidebar .LP-Menu__List {
+      flex-direction: column; }
+      .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item {
+        text-align: left;
+        margin-bottom: 10px;
+        padding-left: 25px; }
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item--additional {
+          background-color: #ccc; }
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item .LP-Link {
+          line-height: 1em; }
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:last-child {
+          margin-bottom: 0; }
+        .LP-Menu--sidebar .LP-Menu__List .LP-Menu__Item:hover {
+          border-right: 2px solid #C09F80;
+          position: relative;
+          background-color: #D7CEC7;
+          color: #76323F; }
+
+@media (max-width: 750px) {
+  .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start; }
+    .LP-Menu:not(.LP-Menu--sidebar) .LP-Menu__List .LP-Menu__Item {
+      flex: 1 1 auto; } }
+
+@media (max-width: 450px) {
+  .LP-Menu .LP-Menu__List {
+    justify-content: space-between; } }
+
+.LP-MessageList {
+  padding: 25px; }
+  .LP-MessageList .LP-MessageList__List {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; }
+  .LP-MessageList .LP-MessageList__Item {
+    margin: 5px 0; }
+
+.LP-Header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  box-shadow: 0 0 2px #C09F80;
+  grid-area: header;
+  background-color: white;
+  padding-left: 25px; }
+  .LP-Header__Navigation {
+    flex-grow: 2; }
+  .LP-Header__Logo {
+    height: 45px;
+    object-fit: cover;
+    max-height: 100%;
+    width: 225px;
+    overflow: hidden;
+    flex-shrink: 0; }
+    .LP-Header__Logo .LP-Image {
+      height: 100%; }
+
+.LP-Header__UserInformation {
+  margin-right: 3%; }
+  .LP-Header__UserInformation .LP-Paragraph {
+    font-family: Montserrat, Helvetica, sans-serif;
+    white-space: nowrap; }
+  .LP-Header__UserInformation .LP-Link {
+    margin: 0 3px;
+    padding: 4px 4px; }
+
+@media (max-width: 750px) {
+  .LP-Header__Logo {
+    width: 45px; }
+    .LP-Header__Logo .LP-Image {
+      object-position: 0 0;
+      object-fit: cover; } }
+
+@media (max-width: 450px) {
+  .LP-Header__Logo {
+    display: none; }
+  .LP-Header__Navigation {
+    width: 100%; } }
+
+@media (max-width: 650px) {
+  .LP-Header {
+    padding-left: 60px;
+    width: calc(100% - 60px);
+    position: fixed;
+    z-index: 10; } }
+
+.LP-PlaceGrid .LP-PlaceGrid__Grid {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; }
+  .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-PlaceGrid__Item {
+    margin: 18px; }
+  .LP-PlaceGrid .LP-PlaceGrid__Grid .LP-Link .LP-PlaceTeaser:hover {
+    box-shadow: 0 0 2px #565656; }
+
+.LP-PlaceList .LP-PlaceList__List {
+  list-style-type: none; }
+  .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover {
+    color: #565656;
+    background-color: #f9f9f9;
+    position: relative;
+    left: -2px; }
+    .LP-PlaceList .LP-PlaceList__List .LP-Link .LP-Place:hover > .LP-Place__Image {
+      border-left: 2px #565656 solid; }
+  .LP-PlaceList .LP-PlaceList__List .LP-PlaceList__Item {
+    max-width: 900px;
+    margin: 18px 0; }
+
+.LP-PlaceList .LP-Pagination {
+  margin-top: 50px; }
+
+.LP-LinkList__List {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  margin: 0;
+  padding: 0; }
+  .LP-LinkList__List .LP-LinkList__Item {
+    border-left: 1px solid #C09F80;
+    width: calc(100% - 1px);
+    margin-top: 12px;
+    position: relative; }
+    .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger {
+      display: none; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder {
+        visibility: hidden; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add {
+        display: block; }
+    .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
+      position: absolute;
+      top: 3px;
+      display: none;
+      width: 100%; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
+        min-width: unset; }
+      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
+        display: block;
+        min-width: 0px; }
+    .LP-LinkList__List .LP-LinkList__Item .LP-Link {
+      padding: 1em 0 1em 1em;
+      width: calc(100% - 1em);
+      display: block;
+      color: #565656; }
+      .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized {
+        padding-top: 0;
+        padding-bottom: 1.1em; }
+        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized:hover {
+          background-color: #ccc !important; }
+        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized .LP-Text {
+          padding-top: .1em; }
+      .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
+        background-color: #f9f9f9;
+        color: #76323F; }
+      .LP-LinkList__List .LP-LinkList__Item .LP-Link .LP-Text {
+        color: inherit; }
+
+.LP-Link__Icon {
+  width: 2em;
+  height: 2em;
+  fill: #76323F;
+  line-height: 5em; }
+
+.LP-LinkList__Item .LP-Link__Icon {
+  position: relative;
+  top: .7em;
+  margin-right: .6em; }
+
+.LP-Footer {
+  margin-top: 75px;
+  width: 100%;
+  background-color: #565656;
+  padding: 25px; }
+  .LP-Footer .LP-LinkList__List {
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+    .LP-Footer .LP-LinkList__List .LP-LinkList__Item {
+      border: none;
+      padding: 5px;
+      width: auto; }
+      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Text {
+        color: #f9f9f9;
+        font-size: 17px; }
+      .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link {
+        display: inline; }
+        .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
+          background-color: inherit; }
+
+.LP-Form {
+  flex-direction: column;
+  align-items: center; }
+  .LP-Form--inline {
+    padding: 0 10px; }
+    .LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition {
+      gap: 10px; }
+  .LP-Form .LP-Form__Fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+    max-width: 1200px;
+    min-width: 750px; }
+    .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
+      margin: 0;
+      padding: 0;
+      font-family: Montserrat, Helvetica, sans-serif;
+      font-size: 21px; }
+  .LP-Form .LP-Form__Composition {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 30px; }
+    .LP-Form .LP-Form__Composition--buttons {
+      gap: 10px; }
+    .LP-Form .LP-Form__Composition .LP-Form__Field {
+      flex: 3 2 100px;
+      padding: 6px 0; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--wider {
+        flex: 5 2; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--wide {
+        flex: 4 2; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--narrow {
+        flex: 2 1; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--narrower {
+        flex: 1 2; }
+      .LP-Form .LP-Form__Composition .LP-Form__Field--static {
+        flex: 0 0; }
+    .LP-Form .LP-Form__Composition--buttons {
+      justify-content: flex-end; }
+    .LP-Form .LP-Form__Composition .LP-Form__Button {
+      flex-grow: 0;
+      padding-left: 0;
+      min-width: 130px; }
+      .LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
+        display: contents; }
+    .LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
+      font-family: Montserrat, Helvetica, sans-serif;
+      color: #565656; }
+
+@media (max-width: 750px) {
+  .LP-Form .LP-Form__Fieldset {
+    min-width: unset; } }
+
+@media (max-width: 650px) {
+  .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; } }
+
+@media (max-width: 450px) {
+  .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; }
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
+      flex: 3 1 100px;
+      padding: 12px 15px; }
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
+      padding: 0 15px; }
+    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons {
+      justify-content: flex-end; } }
+
+.LP-ImageGrid .LP-ImageGrid__List {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 300px);
+  align-content: space-around;
+  justify-content: center;
+  margin: 0px;
+  padding: 0px; }
+
+.LP-ImageGrid .LP-ImageGrid__Item {
+  margin-top: 10px; }
+
+.LP-ImageGrid .LP-Link {
+  overflow: hidden; }
+
+.LP-ImageGrid .LP-Image {
+  box-shadow: 0 0 5px #565656;
+  height: 200px;
+  width: 290px;
+  object-fit: cover; }
+
+@media (max-width: 650px) {
+  .LP-ImageGrid .LP-ImageGrid__List {
+    grid-template-columns: 1fr; }
+    .LP-ImageGrid .LP-ImageGrid__List .LP-Image {
+      box-shadow: 0 0 5px #565656;
+      height: auto;
+      width: 100%;
+      object-fit: cover; } }
+
+.LP-MainContainer {
+  margin: 0 auto;
+  max-width: 1280px; }
+
+.LP-HorizontalLine {
+  color: #565656; }
+
+@media (max-width: 650px) {
+  .LP-MainContainer {
+    width: 100%; } }
+
+.LP-PlaceDetail .LP-PlaceDetail__Image {
+  width: 700px;
+  max-height: 500px;
+  box-shadow: 0 0 10px #565656;
+  object-fit: cover;
+  object-position: 0 0;
+  margin: 0;
+  padding: 0;
+  float: right;
+  margin-left: 35px;
+  margin-bottom: 35px;
+  margin-right: 35px;
+  overflow: hidden; }
+
+@media (max-width: 1000px) {
+  .LP-PlaceDetail .LP-PlaceDetail__Header .LP-PlaceDetail__Image {
+    float: none;
+    width: 100%;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 25px; } }
Author	SHA1	Message	Date
reverend	313968fafd	Form fine tuning and link list add	2020-08-21 12:08:51 +02:00
reverend	8fa8033be4	LinkList add LInk	2020-08-21 10:51:07 +02:00
Commander1024	b64724b586	Converted indentation to spaces globally.	2020-08-17 15:39:17 +02:00
reverend	e80e93bcaa	Pagination disabled class	2020-08-16 20:56:34 +02:00
reverend	384cdcaae7	More Paginatoin Styling, responsive	2020-08-16 17:50:55 +02:00
reverend	427ce11adb	Removed JS, using transition instead of animation for sidebar menu sliding	2020-08-16 17:22:08 +02:00
reverend	15b4bc7880	Padding fix	2020-08-16 12:26:10 +02:00
reverend	9ebfef6c6e	Sidebar height fix	2020-08-16 11:56:21 +02:00
reverend	3f69ff8f0d	No absolute icon paths	2020-08-16 11:42:13 +02:00
reverend	5f4b72f9be	Sidebar animation is not triggered when loading page	2020-08-16 11:40:40 +02:00
reverend	57afcbdffb	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-16 10:31:01 +02:00
reverend	681cdad1cb	Responsive Sidebarmenu	2020-08-16 10:30:55 +02:00
Commander1024	a613d9a069	Made inactive pag-items gray and non-hover.	2020-08-15 20:47:40 +02:00
Commander1024	fb72b00456	Aligned page numbers to the rest again.	2020-08-14 13:56:11 +02:00
Commander1024	3970aed176	Added beautiful navigation icons to pagination nav-css.	2020-08-14 13:41:27 +02:00
Commander1024	0eacea8243	Added fest/previous next/last again incl text for alignment.	2020-08-14 11:31:35 +02:00
Commander1024	14ea0910ef	Added first/last pagination item.	2020-08-14 11:21:13 +02:00
reverend	0e3f005639	Using grid for master layout	2020-08-13 23:44:06 +02:00
reverend	fc0a96b167	Unbugged nav	2020-08-13 23:43:49 +02:00
reverend	8edcf77d44	Removed after content for prev/next	2020-08-13 23:43:34 +02:00
reverend	f973dccd27	Minor tweaks	2020-08-13 11:17:33 +02:00
reverend	a55b02825e	Color adjustment	2020-08-12 22:31:48 +02:00
reverend	7ceddb736f	Pagnation in place list	2020-08-12 22:30:14 +02:00
reverend	2243c7ed9e	Centered Pagination	2020-08-12 22:29:18 +02:00
reverend	1507a0b01e	Small tweak	2020-08-12 22:27:31 +02:00
reverend	c8c21869c4	Pagnination Component	2020-08-12 22:27:18 +02:00
reverend	09a6377901	Some Tweaks	2020-08-12 21:31:13 +02:00
reverend	f0b3839e73	MessageList Component	2020-08-12 21:31:04 +02:00
reverend	72c8febfc4	CSS for Messages	2020-08-12 20:11:22 +02:00
reverend	4120155a1c	New Icons	2020-08-12 20:11:12 +02:00
reverend	fba48603b6	Ye	2020-08-12 18:29:27 +02:00
reverend	16f0e10d89	Minor fix	2020-08-12 18:29:20 +02:00
reverend	e431d9a1a0	Form squishiness and Button layout	2020-08-12 18:29:08 +02:00
reverend	f9233249a3	Styled submit input	2020-08-12 18:28:47 +02:00
reverend	2e48395076	Neater cancle button	2020-08-12 18:28:37 +02:00
reverend	fb20b555c4	More Dynamic modifier rendering	2020-08-09 23:52:15 +02:00
reverend	67fe74d67e	Added Wrapper for Component	2020-08-09 23:52:04 +02:00
reverend	b335e7a587	Removed remnants	2020-08-09 23:48:51 +02:00
reverend	b497e10584	Current build	2020-08-09 23:44:55 +02:00
reverend	bd9df610e7	Renaming	2020-08-09 23:44:50 +02:00
reverend	448358531c	Mayor restrukturing	2020-08-09 23:44:23 +02:00
reverend	9c85c44d2b	Minor width fix	2020-08-09 23:43:57 +02:00
reverend	6d69fb6c29	New Component	2020-08-09 23:43:40 +02:00
reverend	f663864c29	Resetting	2020-08-09 23:43:21 +02:00
reverend	1230f140d0	Adjusted padding/margin	2020-08-09 23:43:03 +02:00
reverend	1a92521029	Layout defintion	2020-08-09 23:42:48 +02:00
Commander1024	02b1c39e9e	Mysterious whitespace difference after npm install.	2020-08-08 09:46:01 +02:00
reverend	039bb7d427	Sync	2020-08-07 11:24:00 +02:00
Commander1024	abb072dfcf	Added missing trailing newline.	2020-08-06 20:24:18 +02:00
Commander1024	178394ed10	Added padding to placegrid.	2020-08-05 20:44:52 +02:00
Commander1024	5844871862	Added max-height to hero image css.	2020-08-05 20:16:07 +02:00
Commander1024	bb7d3b1a2f	Limited image in hight dimension to deal with vertical photos.	2020-08-05 20:08:37 +02:00
reverend	8f7e03cda9	Sidebar and Content the same height	2020-08-05 18:38:22 +02:00
reverend	33c8b302b3	More consistent alignment	2020-08-05 18:38:22 +02:00
reverend	08872806d2	Dirty fix for SCSS bug(?)	2020-08-05 18:38:22 +02:00
Commander1024	8d99205575	Replaced .otf with .ttf fonts as referenced in .css.	2020-08-05 18:20:24 +02:00
Commander1024	450395fa01	Removed unused fonts.	2020-08-05 18:18:22 +02:00
Commander1024	6547569d78	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-05 13:46:55 +02:00
Commander1024	e79c61c63c	updated dependencies	2020-08-05 13:46:41 +02:00
reverend	af634294e2	Refactoring and uncluttering	2020-08-05 13:19:00 +02:00
reverend	cf5e804e50	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 23:48:00 +02:00
reverend	0ca397071a	uff	2020-08-04 23:47:51 +02:00
reverend	ba56976420	zam rumfrickelei	2020-08-04 23:47:39 +02:00
reverend	8f2e607b61	Styling sidebar navigation	2020-08-04 23:47:14 +02:00
reverend	8c412db0e9	Reseting of html, body	2020-08-04 23:46:44 +02:00
Commander1024	43def15caa	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 23:41:19 +02:00
Commander1024	0ad042487f	Changed otf font references by correct ttf ones.	2020-08-04 23:41:15 +02:00
reverend	93341886d6	Other behavior for sidebar links	2020-08-04 20:05:12 +02:00
Commander1024	9e061f9566	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 20:00:44 +02:00
reverend	6f3fb3850f	Minor improvements	2020-08-04 19:42:13 +02:00
reverend	8af6803dcc	More stuff	2020-08-04 19:41:55 +02:00
reverend	19c7bc9442	fixes and first steps towards navigation on the side	2020-08-04 19:41:47 +02:00
reverend	862582c7ba	Changed font of link	2020-08-04 19:40:55 +02:00
reverend	ad17e48049	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-04 18:36:34 +02:00
reverend	706004d2d0	Fixed Distance from headline to text	2020-08-04 18:36:25 +02:00
Commander1024	f469520885	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-02 23:12:25 +02:00
Commander1024	fa5cf10104	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-02 23:03:24 +02:00
Commander1024	76e8a64a2e	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-02 09:22:03 +02:00
Commander1024	f1dcbc19db	Merge branch 'master' of mowoe.com:reverend/lostplaces-frontend	2020-08-01 11:09:00 +02:00
Commander1024	f898b49d05	Ignored npm package-lock file as it is a uniqe to each system.	2020-08-01 11:04:26 +02:00
				`@@ -0,0 +1 @@`
				`<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z"/></svg>
				`@@ -0,0 +1 @@`
				<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>Wondicon - UI (Free)</title><path class="cls-1" d="M125,177.86a5,5,0,0,1-4.74-3.42L96,101.76,27.64,77.57a5,5,0,0,1,.2-9.49L169.22,24.53a5,5,0,0,1,6.23,6.3L129.76,174.37a5,5,0,0,1-4.73,3.49ZM45.23,73.19l56.44,20a5,5,0,0,1,3.07,3.13l20.15,60.44L163,36.9Z"/><path class="cls-1" d="M100,102.84a4.94,4.94,0,0,1-3.59-1.52,5,5,0,0,1,.11-7.07L131.86,60a5,5,0,0,1,7,7.18l-35.35,34.26A5,5,0,0,1,100,102.84Z"/><path class="cls-1" d="M75,175.69a5,5,0,0,1-3.19-8.85l25-20.69a5,5,0,0,1,6.38,7.7l-25,20.69A5,5,0,0,1,75,175.69Z"/><path class="cls-1" d="M29.31,175.69a5,5,0,0,1-3.53-8.54l45.68-45.69a5,5,0,0,1,7.08,7.08L32.85,174.22A5,5,0,0,1,29.31,175.69Z"/><path class="cls-1" d="M29.31,130a5,5,0,0,1-3.85-8.19l20.69-25a5,5,0,0,1,7.7,6.38l-20.69,25A5,5,0,0,1,29.31,130Z"/></svg>