1046 lines
27 KiB
Vue
1046 lines
27 KiB
Vue
|
<template>
|
||
|
|
<nav class="navigation-navbar" v-bind:class="rootClassName">
|
||
|
|
<header data-thq="thq-navbar" class="navigation-navbar-interactive">
|
||
|
|
<router-link to="/" class="navigation-navlink">
|
||
|
|
<img alt="image" :src="OpenvisorLogo" class="navigation-logo" />
|
||
|
|
</router-link>
|
||
|
|
<div
|
||
|
|
data-thq="thq-navbar-nav"
|
||
|
|
data-role="Nav"
|
||
|
|
class="navigation-desktop-menu"
|
||
|
|
>
|
||
|
|
<nav
|
||
|
|
data-thq="thq-navbar-nav-links"
|
||
|
|
data-role="Nav"
|
||
|
|
class="navigation-nav"
|
||
|
|
>
|
||
|
|
<router-link to="/" class="navigation-home nav-link">
|
||
|
|
{{ Home }}
|
||
|
|
</router-link>
|
||
|
|
<router-link to="/larpkonzept" class="navigation-larpkonzept">
|
||
|
|
{{ Larpkonzept }}
|
||
|
|
</router-link>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-larps-dropdown list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle"
|
||
|
|
>
|
||
|
|
<span class="navigation-larps">{{ Larps }}</span>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-arrow"
|
||
|
|
class="navigation-dropdown-arrow"
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 1024 1024" class="navigation-icon">
|
||
|
|
<path d="M426 726v-428l214 214z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ul data-thq="thq-dropdown-list" class="navigation-dropdown-list">
|
||
|
|
<router-link to="/letzte-gelegenheit">
|
||
|
|
<li data-thq="thq-dropdown" class="navigation-dropdown list-item">
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle01"
|
||
|
|
>
|
||
|
|
<span class="navigation-letzte-gelegenheit">
|
||
|
|
{{ LetzteGelegenheit }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
<router-link to="/suesse-traeume">
|
||
|
|
<li
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-dropdown1 list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle02"
|
||
|
|
>
|
||
|
|
<span class="navigation-suesse-traeume">
|
||
|
|
{{ SuesseTraeume }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-kurzgeschichten-dropdown list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle03"
|
||
|
|
>
|
||
|
|
<span class="navigation-kurzgeschichten">
|
||
|
|
{{ Kurzgeschichten }}
|
||
|
|
</span>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-arrow"
|
||
|
|
class="navigation-dropdown-arrow1"
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 1024 1024" class="navigation-icon02">
|
||
|
|
<path d="M426 726v-428l214 214z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ul data-thq="thq-dropdown-list" class="navigation-dropdown-list1">
|
||
|
|
<router-link to="/ein-orden-fuer-eine-gute-tat">
|
||
|
|
<li
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-dropdown2 list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle04"
|
||
|
|
>
|
||
|
|
<span class="navigation-ein-orden-fuer-eine-gute-tat">
|
||
|
|
{{ EinOrdenFuerEineGuteTat }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
<router-link to="/rosenteufel">
|
||
|
|
<li
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-dropdown3 list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle05"
|
||
|
|
>
|
||
|
|
<span class="navigation-rosenteufel">{{ Rosenteufel }}</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div data-thq="thq-burger-menu" class="navigation-burger-menu">
|
||
|
|
<svg viewBox="0 0 1024 1024" class="navigation-icon04">
|
||
|
|
<path
|
||
|
|
d="M128 554.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 298.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667zM128 810.667h768c23.552 0 42.667-19.115 42.667-42.667s-19.115-42.667-42.667-42.667h-768c-23.552 0-42.667 19.115-42.667 42.667s19.115 42.667 42.667 42.667z"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div data-thq="thq-mobile-menu" class="navigation-mobile-menu">
|
||
|
|
<div
|
||
|
|
data-thq="thq-mobile-menu-nav"
|
||
|
|
data-role="Nav"
|
||
|
|
class="navigation-nav1"
|
||
|
|
>
|
||
|
|
<div class="navigation-nav-top">
|
||
|
|
<div data-thq="thq-close-menu" class="navigation-menu-close">
|
||
|
|
<svg viewBox="0 0 1024 1024" class="navigation-icon06">
|
||
|
|
<path
|
||
|
|
d="M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<nav
|
||
|
|
data-thq="thq-mobile-menu-nav-links"
|
||
|
|
data-role="Nav"
|
||
|
|
class="navigation-nav-body"
|
||
|
|
>
|
||
|
|
<router-link to="/" class="navigation-home1">{{ Home }}</router-link>
|
||
|
|
<router-link to="/larpkonzept" class="navigation-larpkonzept1">
|
||
|
|
{{ Larpkonzept }}
|
||
|
|
</router-link>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-larps-dropdown1 list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle06"
|
||
|
|
>
|
||
|
|
<span class="navigation-larps1">{{ Larps }}</span>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-arrow"
|
||
|
|
class="navigation-dropdown-arrow2"
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 1024 1024" class="navigation-icon08">
|
||
|
|
<path d="M426 726v-428l214 214z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ul
|
||
|
|
data-thq="thq-dropdown-list"
|
||
|
|
class="navigation-larps-dropdown-list"
|
||
|
|
>
|
||
|
|
<router-link to="/letzte-gelegenheit">
|
||
|
|
<li
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-letzte-gelegenheit-dropdown list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle07"
|
||
|
|
>
|
||
|
|
<span class="navigation-letzte-gelegenheit1">
|
||
|
|
{{ LetzteGelegenheit }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
<router-link to="/suesse-traeume">
|
||
|
|
<li
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-suesse-traeume-dropdown list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle08"
|
||
|
|
>
|
||
|
|
<span class="navigation-suesse-traeume1">
|
||
|
|
{{ SuesseTraeume }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-kurzgeschichten-dropdown1 list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle09"
|
||
|
|
>
|
||
|
|
<span class="navigation-kurzgeschichten1">
|
||
|
|
{{ Kurzgeschichten }}
|
||
|
|
</span>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-arrow"
|
||
|
|
class="navigation-dropdown-arrow3"
|
||
|
|
>
|
||
|
|
<svg viewBox="0 0 1024 1024" class="navigation-icon10">
|
||
|
|
<path d="M426 726v-428l214 214z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<ul
|
||
|
|
data-thq="thq-dropdown-list"
|
||
|
|
class="navigation-kurzgeschichten-dropdown-list"
|
||
|
|
>
|
||
|
|
<router-link to="/ein-orden-fuer-eine-gute-tat">
|
||
|
|
<li
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-ein-orden-fuer-eine-gute-tat-dropdown list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle10"
|
||
|
|
>
|
||
|
|
<span class="navigation-ein-orden-fuer-eine-gute-tat1">
|
||
|
|
{{ EinOrdenFuerEineGuteTat }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
<router-link to="/rosenteufel">
|
||
|
|
<li
|
||
|
|
data-thq="thq-dropdown"
|
||
|
|
class="navigation-rosenteufel-dropdown list-item"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
data-thq="thq-dropdown-toggle"
|
||
|
|
class="navigation-dropdown-toggle11"
|
||
|
|
>
|
||
|
|
<span class="navigation-rosenteufel1">
|
||
|
|
{{ Rosenteufel }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</router-link>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Navigation',
|
||
|
|
props: {
|
||
|
|
OpenvisorLogo: {
|
||
|
|
type: String,
|
||
|
|
default: '/playground_assets/logo_mitoffenemvisier_bw_png-1500h.png',
|
||
|
|
},
|
||
|
|
Kurzgeschichten: {
|
||
|
|
type: String,
|
||
|
|
default: 'Kurzgeschichten',
|
||
|
|
},
|
||
|
|
LetzteGelegenheit: {
|
||
|
|
type: String,
|
||
|
|
default: 'Letzte Gelegenheit',
|
||
|
|
},
|
||
|
|
Home: {
|
||
|
|
type: String,
|
||
|
|
default: 'Home',
|
||
|
|
},
|
||
|
|
Larps: {
|
||
|
|
type: String,
|
||
|
|
default: 'Larps',
|
||
|
|
},
|
||
|
|
EinOrdenFuerEineGuteTat: {
|
||
|
|
type: String,
|
||
|
|
default: 'Ein Orden für eine gute Tat',
|
||
|
|
},
|
||
|
|
SuesseTraeume: {
|
||
|
|
type: String,
|
||
|
|
default: 'Süsse Träume',
|
||
|
|
},
|
||
|
|
Larpkonzept: {
|
||
|
|
type: String,
|
||
|
|
default: 'Larpkonzept',
|
||
|
|
},
|
||
|
|
Rosenteufel: {
|
||
|
|
type: String,
|
||
|
|
default: 'Rosenteufel',
|
||
|
|
},
|
||
|
|
rootClassName: String,
|
||
|
|
image_alt: {
|
||
|
|
type: String,
|
||
|
|
default: 'image',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.navigation-navbar {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
z-index: 1000;
|
||
|
|
position: relative;
|
||
|
|
max-width: 1200px;
|
||
|
|
align-self: auto;
|
||
|
|
align-items: center;
|
||
|
|
flex-shrink: 1;
|
||
|
|
padding-top: var(--dl-space-space-twounits);
|
||
|
|
padding-left: var(--dl-space-space-oneandhalfunits);
|
||
|
|
padding-right: var(--dl-space-space-oneandhalfunits);
|
||
|
|
padding-bottom: var(--dl-space-space-fiveunits);
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.navigation-navbar-interactive {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-twounits);
|
||
|
|
padding-left: var(--dl-space-space-threeunits);
|
||
|
|
padding-right: var(--dl-space-space-threeunits);
|
||
|
|
padding-bottom: var(--dl-space-space-twounits);
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.navigation-navlink {
|
||
|
|
display: contents;
|
||
|
|
}
|
||
|
|
.navigation-logo {
|
||
|
|
width: 100px;
|
||
|
|
object-fit: cover;
|
||
|
|
transition: 0.3s;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-desktop-menu {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.navigation-nav {
|
||
|
|
gap: var(--dl-space-space-fourunits);
|
||
|
|
flex: 0 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
.navigation-home {
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 1.15;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-larpkonzept {
|
||
|
|
color: #ffffff;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 500;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-larps-dropdown {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: 0px;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
padding-right: 0px;
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-larps {
|
||
|
|
color: #ffffff;
|
||
|
|
font-style: normal;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-right: 4px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-arrow {
|
||
|
|
transition: 0.3s;
|
||
|
|
}
|
||
|
|
.navigation-icon {
|
||
|
|
fill: #ffffff;
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
margin-top: auto;
|
||
|
|
transition: 0.3s;
|
||
|
|
margin-bottom: auto;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-list {
|
||
|
|
left: 0%;
|
||
|
|
width: max-content;
|
||
|
|
display: none;
|
||
|
|
z-index: 100;
|
||
|
|
position: absolute;
|
||
|
|
min-width: 100%;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: stretch;
|
||
|
|
border-color: #D9D9D9;
|
||
|
|
border-width: 1px;
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
flex-direction: column;
|
||
|
|
list-style-type: none;
|
||
|
|
background-color: var(--dl-color-gray-white);
|
||
|
|
list-style-position: inside;
|
||
|
|
}
|
||
|
|
.navigation-dropdown {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle01 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle01:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-letzte-gelegenheit {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.navigation-dropdown1 {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle02 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle02:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-suesse-traeume {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.navigation-kurzgeschichten-dropdown {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle03 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: 0px;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
padding-right: 0px;
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-kurzgeschichten {
|
||
|
|
color: #ffffff;
|
||
|
|
font-style: normal;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-right: 4px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-arrow1 {
|
||
|
|
transition: 0.3s;
|
||
|
|
}
|
||
|
|
.navigation-icon02 {
|
||
|
|
fill: #ffffff;
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
margin-top: auto;
|
||
|
|
transition: 0.3s;
|
||
|
|
margin-bottom: auto;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-list1 {
|
||
|
|
left: 0%;
|
||
|
|
width: max-content;
|
||
|
|
display: none;
|
||
|
|
z-index: 100;
|
||
|
|
position: absolute;
|
||
|
|
min-width: 100%;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: stretch;
|
||
|
|
border-color: #D9D9D9;
|
||
|
|
border-width: 1px;
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
flex-direction: column;
|
||
|
|
list-style-type: none;
|
||
|
|
background-color: var(--dl-color-gray-white);
|
||
|
|
list-style-position: inside;
|
||
|
|
}
|
||
|
|
.navigation-dropdown2 {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle04 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle04:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-ein-orden-fuer-eine-gute-tat {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.navigation-dropdown3 {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle05 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle05:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-rosenteufel {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.navigation-burger-menu {
|
||
|
|
display: none;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.navigation-icon04 {
|
||
|
|
width: 36px;
|
||
|
|
cursor: pointer;
|
||
|
|
height: 36px;
|
||
|
|
padding: 6px;
|
||
|
|
border-radius: 18px;
|
||
|
|
background-color: rgba(100, 100, 100, 0.4);
|
||
|
|
}
|
||
|
|
.navigation-mobile-menu {
|
||
|
|
top: 0px;
|
||
|
|
left: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
padding: 32px;
|
||
|
|
z-index: 100;
|
||
|
|
position: fixed;
|
||
|
|
transform: translateY(-100%);
|
||
|
|
transition: 0.5s;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
background-color: rgba(0,0,0,0.8);
|
||
|
|
}
|
||
|
|
.navigation-nav1 {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.navigation-nav-top {
|
||
|
|
width: auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
margin-left: 90%;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
.navigation-menu-close {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.navigation-icon06 {
|
||
|
|
fill: #ffffff;
|
||
|
|
width: 30px;
|
||
|
|
cursor: pointer;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
.navigation-nav-body {
|
||
|
|
flex: 0 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.navigation-home1 {
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: var(--dl-space-space-unit);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-larpkonzept1 {
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: var(--dl-space-space-unit);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-larps-dropdown1 {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle06 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-larps1 {
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-right: 4px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-arrow2 {
|
||
|
|
transition: 0.3s;
|
||
|
|
}
|
||
|
|
.navigation-icon08 {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
margin-top: auto;
|
||
|
|
transition: 0.3s;
|
||
|
|
margin-bottom: auto;
|
||
|
|
}
|
||
|
|
.navigation-larps-dropdown-list {
|
||
|
|
left: 0%;
|
||
|
|
width: max-content;
|
||
|
|
display: none;
|
||
|
|
z-index: 100;
|
||
|
|
position: absolute;
|
||
|
|
min-width: 100%;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: stretch;
|
||
|
|
border-color: #D9D9D9;
|
||
|
|
border-width: 1px;
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
flex-direction: column;
|
||
|
|
list-style-type: none;
|
||
|
|
background-color: var(--dl-color-gray-white);
|
||
|
|
list-style-position: inside;
|
||
|
|
}
|
||
|
|
.navigation-letzte-gelegenheit-dropdown {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle07 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle07:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-letzte-gelegenheit1 {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.navigation-suesse-traeume-dropdown {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle08 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle08:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-suesse-traeume1 {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.navigation-kurzgeschichten-dropdown1 {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle09 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-kurzgeschichten1 {
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
text-align: center;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-right: 4px;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-arrow3 {
|
||
|
|
transition: 0.3s;
|
||
|
|
}
|
||
|
|
.navigation-icon10 {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
margin-top: auto;
|
||
|
|
transition: 0.3s;
|
||
|
|
margin-bottom: auto;
|
||
|
|
}
|
||
|
|
.navigation-kurzgeschichten-dropdown-list {
|
||
|
|
left: 0%;
|
||
|
|
width: max-content;
|
||
|
|
display: none;
|
||
|
|
z-index: 100;
|
||
|
|
position: absolute;
|
||
|
|
min-width: 100%;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: stretch;
|
||
|
|
border-color: #D9D9D9;
|
||
|
|
border-width: 1px;
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
flex-direction: column;
|
||
|
|
list-style-type: none;
|
||
|
|
background-color: var(--dl-color-gray-white);
|
||
|
|
list-style-position: inside;
|
||
|
|
}
|
||
|
|
.navigation-ein-orden-fuer-eine-gute-tat-dropdown {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle10 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle10:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-ein-orden-fuer-eine-gute-tat1 {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.navigation-rosenteufel-dropdown {
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
border-radius: var(--dl-radius-radius-radius2);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle11 {
|
||
|
|
fill: #595959;
|
||
|
|
color: #595959;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-flex;
|
||
|
|
transition: 0.3s;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: var(--dl-space-space-halfunit);
|
||
|
|
padding-left: var(--dl-space-space-unit);
|
||
|
|
border-radius: var(--dl-radius-radius-radius4);
|
||
|
|
padding-right: var(--dl-space-space-unit);
|
||
|
|
padding-bottom: var(--dl-space-space-halfunit);
|
||
|
|
}
|
||
|
|
.navigation-dropdown-toggle11:hover {
|
||
|
|
fill: #fff;
|
||
|
|
color: #fff;
|
||
|
|
background-color: #595959;
|
||
|
|
}
|
||
|
|
.navigation-rosenteufel1 {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
font-size: 14px;
|
||
|
|
font-style: normal;
|
||
|
|
font-family: Poppins;
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@media(max-width: 991px) {
|
||
|
|
.navigation-nav {
|
||
|
|
gap: var(--dl-space-space-twounits);
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media(max-width: 767px) {
|
||
|
|
.navigation-navbar {
|
||
|
|
padding-bottom: var(--dl-space-space-fourunits);
|
||
|
|
}
|
||
|
|
.navigation-navbar-interactive {
|
||
|
|
padding-left: TwoUnits;
|
||
|
|
padding-right: var(--dl-space-space-twounits);
|
||
|
|
}
|
||
|
|
.navigation-desktop-menu {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-list {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.navigation-dropdown-list1 {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.navigation-burger-menu {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.navigation-icon04 {
|
||
|
|
fill: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-home1 {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-larpkonzept1 {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-larps1 {
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.navigation-icon08 {
|
||
|
|
fill: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-larps-dropdown-list {
|
||
|
|
display: none;
|
||
|
|
border-color: #000000;
|
||
|
|
background-color: rgb(41, 41, 41);
|
||
|
|
}
|
||
|
|
.navigation-letzte-gelegenheit1 {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-suesse-traeume1 {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-kurzgeschichten1 {
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.navigation-icon10 {
|
||
|
|
fill: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-kurzgeschichten-dropdown-list {
|
||
|
|
display: none;
|
||
|
|
border-color: #000000;
|
||
|
|
background-color: rgb(41, 41, 41);
|
||
|
|
}
|
||
|
|
.navigation-ein-orden-fuer-eine-gute-tat1 {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-rosenteufel1 {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media(max-width: 479px) {
|
||
|
|
.navigation-navbar-interactive {
|
||
|
|
padding: var(--dl-space-space-unit);
|
||
|
|
}
|
||
|
|
.navigation-burger-menu {
|
||
|
|
width: auto;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
.navigation-icon04 {
|
||
|
|
fill: transparent;
|
||
|
|
width: auto;
|
||
|
|
height: auto;
|
||
|
|
z-index: 110;
|
||
|
|
padding-top: 0px;
|
||
|
|
border-color: var(--dl-color-gray-black);
|
||
|
|
border-width: 0px;
|
||
|
|
}
|
||
|
|
.navigation-mobile-menu {
|
||
|
|
padding: 16px;
|
||
|
|
}
|
||
|
|
.navigation-icon08 {
|
||
|
|
fill: #ffffff;
|
||
|
|
}
|
||
|
|
.navigation-icon10 {
|
||
|
|
fill: #ffffff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|