/* oxygen-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Oxygen';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/oxygen/oxygen-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* italianno-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Italianno';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/italianno/italianno-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ---------- Beginn allgemeines Design ---------- */



html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: silver;
    /*font-size: 100%;*/

    /* ---------- Festlegung der Farben ----------*/

    --turkis: #08fff5; /* 8, 255, 245 */
    --middleturkis: #059994; /* 5, 153, 148 */
    --darkturkis: #023331; /* 2, 51, 49 */
    --grey: #c8c8c8; /* 200, 200, 200 */
    --darkgrey: #a0a0a0; /* 160, 160, 160 */
    --lightgrey: #fafafa; /* 250, 250, 250 */
    --nav-grey: #f0f0f0; /* 240, 240, 240 */
    --bg-grey: #dcdcdc; /* 220, 220, 220 */
    --text: #202020; /* 32, 32, 32 */
    --border: #888; /* 136, 136, 136 */
    --orange: #ffc105 /* 255, 193, 5 */
}

/* ---------- Festlegung der Schriftgroesse ---------- */

/* @link https://utopia.fyi/type/calculator?c=320,19,1.125,1920,21,1.125,5,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --fluid-min-width: 320;
    --fluid-max-width: 1920;
    --f-min: 14;
    --f-max: 15;
    --scale-min: 1.12;
    --scale-max: 1.18;
  
    --fluid-screen: 100vw;
    --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}
  
@media screen and (min-width: 1920px) {
    :root {
      --fluid-screen: calc(var(--fluid-max-width) * 1px);
    }
}
  
:root {
    --f-0-min: var(--f-min); /* 16.00px */
    --f-0-max: var(--f-max); /* 18.00px */
    --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
  
    --f-1-min: calc(var(--f-0-min) * var(--scale-min)); /* 17.92px */
    --f-1-max: calc(var(--f-0-max) * var(--scale-max)); /* 21.24px */
    --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
  
    --f-2-min: calc(var(--f-1-min) * var(--scale-min)); /* 20.07px */
    --f-2-max: calc(var(--f-1-max) * var(--scale-max)); /* 25.06px */
    --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
  
    --f-3-min: calc(var(--f-2-min) * var(--scale-min)); /* 22.48px */
    --f-3-max: calc(var(--f-2-max) * var(--scale-max)); /* 29.57px */
    --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
  
    --f-4-min: calc(var(--f-3-min) * var(--scale-min)); /* 25.18px */
    --f-4-max: calc(var(--f-3-max) * var(--scale-max)); /* 34.90px */
    --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
  
    --f-5-min: calc(var(--f-4-min) * var(--scale-min)); /* 28.20px */
    --f-5-max: calc(var(--f-4-max) * var(--scale-max)); /* 41.18px */
    --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
}

/* ---------- Variablen fuer die Action-Bar ---------- */

:root {
    --sc-max: 1220;
    --sc-min: 800;
    --sc-real: 100%;
    --b-max: 260;
    --b-min: 205;
}
  
@media screen and (min-width: 1220px) {
    :root {
      --sc-real: 1220;
    }
}
  
:root {
    --a: calc((var(--b-max) - var(--b-min)) / (var(--sc-max) - var(--sc-min)));
    --b: calc(var(--b-min) - (var(--sc-min) * var(--a)));
  
    --b-feld: calc(((var(--sc-real) * var(--a)) + var(--b)) * 1px);
}

/* ---------- Beginn der Design-Daten ---------- */

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    /*scroll-behavior: smooth;*/
}

body {
    background-color: silver;
    overflow-x: hidden;
}

body, button, input, select, textarea, optgroup {
    color: var(--text);
    font-family: oxygen, calibri, arial, sans-serif;
    font-size: var(--step-0);
}

button, input, select, textarea, optgroup {
    background-color: var(--bg-grey);
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: inherit;
}

ul, ol {
    box-sizing: border-box;
}

h1, h2, h3, h4 {
    text-align: center;
    font-weight: bold;
    margin: 10px;
}

h1 {
    font-size: var(--step-5); /* 2.6rem; */
    /*font-size: clamp(2.08em, calc(2.08em + 1vw), 2.6em);*/
}

h2 {
    font-size: var(--step-4); /* 2.0rem; */
    /*font-size: clamp(1.6em, calc(1.6em + 1vw), 2.0em);*/
}

h3 {
    font-size: var(--step-3); /* 1.6rem; */
    /*font-size: clamp(1.28em, calc(1.28em + 1vw), 1.6em);*/
}

h4 {
    font-size: var(--step-2); /* 1.4rem; */
    /*font-size: clamp(1.12em, calc(1.12em + 1vw), 1.4em);*/
}

p {
    margin: 15px;
}

.linie {
    margin: 15px;
    border: none;
    border-top: 1px solid var(--text);
}

a {
    text-decoration: none;
}

.boxes .links {
    color: var(--middleturkis);
    font-weight: bold;
}

.boxes .autor {
    color: #f6000a; /* 246 / 0 / 10 */
}

.social-media-item a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 8px 32px;
    text-decoration: none;
    color: #fff;
    width: 100%;
    font-style: normal;
}

.social-media-item a.button i {
    position: relative;
    font-size: 15px;
}

.social-media-item a.button.is-secondary:hover {
    color: var(--darkgrey);
    background-color: var(--turkis);
    border: 1px solid var(--darkgrey);
}

.button {
    position: relative;
    border: 0 none;
    background: 0 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    text-transform: uppercase;
    padding: 16px 30px;
    font-size: 16px;
    font-size: 1rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    cursor: pointer;
    width: 100%;
    font-style: normal;
}

.button.is-secondary:hover, button.is-secondary:hover {
    color: var(--darkgrey);
    background-color: var(--turkis);
    border: 1px solid var(--darkgrey);
}

.boxes .spalten > .motto {
    font-family: italianno, "tiranti solid let", "lucida calligraphy", "monotype corsiva", fantasy;
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
}

.verspielt {
    font-family: italianno, "tiranti solid let", "lucida calligraphy", "monotype corsiva", fantasy;
}

.site {
    min-height: 100%;
    padding-top: 60px;
    background: var(--lightgrey);
    position: relative;
}

.header {
    position: fixed;
    background: silver;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    z-index: 999;
}

.header .header-inner {
    display: flex;
    justify-content: center;
    height: inherit;
}

.header .header-inner.row #account {
    position: absolute;
    top: 5px;
    right: 5px;
}

.header .header-inner.row #account .account {
    all: unset;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: var(--turkis);
    color: var(--darkgrey);
    border-radius: 5px;
    transition: all 0.5s;
}

.header .header-inner.row #account .account:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
    transition: all 0.5s;
}

.shadow {
    box-shadow: 0px 2px 8px 0px rgb(0, 0, 0, .5);
}

.row {
    position: relative;
/*    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    padding-top: 20px;*/
    background-color: var(--turkis);
}

#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    width: 280px;
    margin-top: 60px;
    transform: translateX(350px);
    transition: transform 250ms ease-in-out;
    background: linear-gradient(180deg, var(--turkis) 0%, var(--grey) 100%);
}

.sidebarMenuInner {
    margin:0;
    padding:0;
    border-top: 1px solid rgba(var(--grey), 0.10);
}

.sidebarMenuInner > li {
    list-style: none;
    color: var(--darkgrey);
    /*text-transform: uppercase;*/
    font-weight: bold;
    padding: 20px;
    border-bottom: 1px solid rgba(var(--grey), 0.10);
    position: relative;
}

.sidebarMenuInner .menu-point {
    display: flex;
    flex-direction: row;
}

.sidebarMenuInner li span {
    display: block;
    margin: 0 15px;
    cursor: pointer;
}

.sidebarMenuInner .menu-point > a {
    display: block;
    width: 100%;
    color: var(--darkgrey);
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
}

.sidebarMenuInner input {
    display: none;
}

.sidebarMenuInner .sub-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
}

.sidebarMenuInner .sub-menu li {
    padding: 10px;
}

.sidebarMenuInner .sub-menu li:last-child {
    padding-bottom: 0;
}

.sidebarMenuInner .sub-menu a {
    display: block;
    width: 100%;
    color: var(--darkgrey);
    cursor: pointer;
    text-decoration: none;
}

div.main-nav li.menu-item > ul.sub-menu {
    display: flex;
    width: 500px;
    justify-content: space-between;
    padding: 16px 10px;
    z-index: 10000;
    background: #fff;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    -webkit-box-shadow: 0 -2px 16px -6px rgba(0,0,0,.3);
    -moz-box-shadow: 0 -2px 16px -6px rgba(0,0,0,.3);
    box-shadow: 0 -2px 16px -6px rgba(0,0,0,.3);
}

.menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav .menu .menu-item > .sub-menu.sub-menu::before {
    left: 50%;
}

.main-nav .menu .menu-item .sub-menu .menu-item .sub-menu .menu-item,
.mobile-menu .sidebarMenuInner .sub-menu .menu-item {
    position: relative;
}

.main-nav .menu .menu-item .sub-menu .menu-item .sub-menu .menu-item #sign,
.mobile-menu .sidebarMenuInner .sub-menu .menu-item #sign {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
}

.mobile-menu .sidebarMenuInner .menu-point #sign {
    position: absolute;
    height: 100%;
    top: 20;
}

.main-nav .menu .menu-item .sub-menu .menu-item .sub-menu .menu-item #sign {
    left: -18px;
}

.mobile-menu .sidebarMenuInner .sub-menu .menu-item #sign {
    left: -12px;
    font-size: 120%;
}

.mobile-menu .sidebarMenuInner .menu-point #sign {
    left: 3px;
    font-size: 100%;
}

.mobile-menu .sidebarMenuInner .sub-menu .menu-item:last-child #sign {
    align-items: end !important;
}

#sign.neu {
    color: #ff0090;
}

#sign.erweitert {
    color: #007aff;
}

#sign.achtung {
    color: #ffea00;
}

.main-nav .menu .menu-item > .sub-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    clear: both;
}

div.main-nav.main-nav.main-nav li.menu-item > ul.sub-menu > li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-basis: 0;
    flex-grow: 1;
}

.main-nav .menu .menu-item > .sub-menu .menu-item {
    display: block;
    margin: 0;
    padding: 0 12px;
}

div.main-nav.main-nav.main-nav li.menu-item:hover > ul.sub-menu > li.menu-item > ul.sub-menu {
    visibility: visible;
    opacity: 1;
}

div.main-nav.main-nav.main-nav li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 !important;
    padding: 0;
    position: initial;
    background: unset;
    box-shadow: unset;
    width: auto;
}

div.main-nav.main-nav.main-nav li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu > li {
    padding: 0;
    text-align: left;
}

div.main-nav.main-nav.main-nav li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu a {
    font-size: 0.8em;
    font-weight: normal;
    text-transform: inherit;
    line-height: 1.1;
    background: 0 0;
    color: var(--text);
    text-align: left;
}

div.main-nav.main-nav.main-nav li.menu-item > ul.sub-menu a:hover {
    color: var(--middleturkis) !important;
}

input#hamburg:checked ~ #sidebarMenu {
    transform: translateX(0);
}


label.hamburg {
    display: block;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 19px;
    right: 20px;
    cursor: pointer;
}

input#hamburg {
    transition: all 0.3s;
    display:none
}

.line {
    position: absolute;
    left: 0;
    height: 4px;
    width: 45px;
    background: var(--darkgrey);
    border-radius: 2px;
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

.line:nth-child(1) { top: 11px; }
.line:nth-child(2) { top: 22px; }
.line:nth-child(3) { top: 33px; }

#hamburg:checked + .hamburg .line:nth-child(1){
    transform: translateY(11px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
    transform: translateY(-11px) rotate(45deg);
}

.kopf-bild {
    position: relative;
    overflow: hidden;
}

.kopf-bild.has-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.kopf-bild.has-image.home {
    background-image: url("bilder/home_kopf.jpg");
}

.kopf-bild.has-image.wir {
    background-image: url("bilder/wir_kopf.jpg");
}

.kopf-bild.has-image.bulli {
    background-image: url("bilder/bulli_kopf.jpg");
}

.kopf-bild.has-image.blog {
    background-image: url("bilder/blog_kopf.jpg");
}

.kopf-bild.has-image.reise {
    background-image: url("bilder/reise_kopf.jpg");
}

.kopf-bild.has-image.tipps {
    background-image: url("bilder/home_wir_klein1.jpg");
}

.kopf-bild.has-image.impressum {
    background-image: url("bilder/home_wir_klein1.jpg");
}

.kopf-bild.has-image.dsgvo {
    background-image: url("bilder/home_wir_klein1.jpg");
}

.kopf-bild.has-image.kontakt {
    background-image: url("bilder/home_wir_klein1.jpg");
}

.kopf-overlay {
    position: absolute;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.kopf-overlay .overlay-content {
    margin-top: 20px;
    border-radius: 15px;
    padding: 0 20px;
    text-align: center;
    background-color: rgba(167, 255, 252, 0.4);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1px);
    border: 0.5px solid rgba(255, 255, 255, 0.3);
}

.overlay-content h1 {
    text-transform: uppercase;
}

.site-content {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    max-width: 1280px;
    background-color: var(--bg-grey);
}

.site-content .main {
    display: flex;
    flex-direction: row;
    position: relative;
    margin: 0 auto;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    max-width: 1280px;
    background-color: var(--bg-grey);
}

.action-bar {
    display: grid;
    align-items: center;
    height: 50px;
    background-image: linear-gradient(to right, var(--bg-grey), var(--turkis), var(--bg-grey));
    border-bottom: 1px solid var(--border);
    padding: 0 30px;
    width: 100%;
}

.action-bar .social-media, .action-bar .social-media-links li.none, .action-bar .search-channels form.none {
    display: none;
}

.action-bar .social-media-links, .action-bar .search-channels {
    /*display: flex;
    align-items: center;*/
}

.action-bar .headline {
	/*height: 50px;*/
}

.action-bar .headline h4 {
	margin: 0;
}

.action-bar ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-bar ul li {
    width: 30px;
    margin-bottom: 0;
}


.action-bar ul .button {
    box-shadow: none;
}

.social-media-item a.button.is-secondary {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.action-bar .searchform {
    width: 100%;
}

.action-bar .searchform input {
    width: 100%;
}

.searchform {
    position: relative;
}

.searchform input[type="text"] {
    height: 30px;
    padding: 0 60px 0 22px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    border: 1px solid var(--darkgrey);
    background: var(--lightgrey);
    -webkit-transition: border-color .3s ease;
    -moz-transition: border-color .3s ease;
    -ms-transition: border-color .3s ease;
    -o-transition: border-color .3s ease;
    transition: border-color .3s ease;
}

.social-media-item .button.is-rounded, button.is-rounded {
    padding: 0;
    margin: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-media-item .button.is-secondary, button.is-secondary {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.searchform .button {
    position: absolute;
    display: block;
    top: 0; /*5px;*/
    right: 0; /*-5px;*/
    box-shadow: none;
}

.blank-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar {
    width: 250px;
    position: relative;
}

.main-content {
    flex: 1;
    background-color: var(--bg-grey);
    /*padding: 20px;*/
}

.nav-bar {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: var(--grey);*/
    height: 57px;
    bottom: 0;
    left: 0;
    width: 100%;
    /*z-index: 9999992;*/
    box-shadow: 0 -2px 8px 0 rgba(0,0,0,.2);
}

.nav-content {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - 57px);
}

.nav-content ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: auto;
    height: calc(100vh - 80px);
    background: rgba(255,255,255,.9);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-content li {
    border-bottom: 1px solid var(--darkgrey);
}

.nav-content li a {
    display: block;
    position: relative;
    color: var(--darkturkis);
    font-weight: 900;
    padding: 10px 20px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.nav-content li.active a, .nav-content li:hover a {
    background: var(--turkis);
    color: var(--text);
}

.small {
    width: 65%;
    margin: 0 auto;
    padding: 10px;
}

.countdown {
    display: flex;
    background-color: var(--turkis);
    color: var(--darkgrey);
    margin: 0 auto;
    padding: 10px;
    border-radius: 20px;
    max-width: 570px;
}

.countdown-feld {
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.0em;
    margin: 0;
}

.cd {
    font-size: 2.3em;
    margin: 0;
    padding: 0;
}

.trennung {
    border-right: var(--darkgrey) 1px solid;
}

.reisebeschreibung {
    float: left;
    width: calc((100% - 80px) / 2);
    object-fit: scale-down;
    border-radius: 10px;
    margin: 20px;
}

.line-top {
    border-top: var(--darkgrey) 1px solid;
}

.boxes {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    /*margin: 0px 32px;*/
}

.bottomline {
    border-bottom: var(--border) solid 1px;
}

.anchor {
    display: block;
    position: relative;
    top: -110px;
    visibility: hidden;
}

.spalten {
    flex-grow: 1;
    flex-basis: 300px;
    position: relative;
    overflow: hidden;
    margin: 19px 32px;
    background-color: var(--bg-grey);
}

.spalten > .slogan {
    text-align: center;
    font-size: 1.8em;
}

.spalten > nav {
    display: grid;
    grid: auto-flow / 1fr 1fr 0.3fr 1fr 1fr;
    gap: 10px;
    border-top: var(--border) 1px solid;
}

.spalten > nav > div {
    display: inline-block;
    width: 100%;
    text-align: center; 
}

.spalten > nav > div a {
    display: inline-block;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    text-decoration: none;
    color: var(--darkgrey);
}

.spalten > nav > div a:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.rahmen {
    border-radius: 20px;
    border: var(--darkgrey) 1px solid;
}

.picgross {
    width: 100%;
    height: auto;
    /*object-fit: scale-down;*/
}

.footer {
    position: absolut; /*relative;*/
    bottom: 0;
    height: 2em;
}


.footer .row {
    max-width: 1280px;
    padding: 0;
    border-top: 1px solid var(--border);
    position: relative;
}

.footerlinks {
    display: block;
    font-weight: bold;
    flex: 1;
    text-decoration: none;
    color: var(--darkgrey);
    background-color: var(--turkis);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 10px;
    margin: 10px 10px;
    text-align: center;
}

.footerlinks:hover,focus {
    background-color: var(--darkgrey);
    color: var(--turkis);

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.footer .copyright {
    margin: 5px 0 0 0;
    text-align: center;
    color: var(--darkgrey);
    font-size: 0.9em;
}

.footer .sign {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.footer .sign.left {
    left: 40px;
}

.footer .sign.right {
    right: 40px;
}

.footer .sign > img {
    height: 50%;
    width: auto;
}

.footer .sign.left > img {
    transform: rotate(-30deg);
}

.footer .sign.right > img {
    transform: rotate(30deg);
}

.mobile-menu {
    /*/display: none;*/
    background: #749578;
}

.logo_platzhalter {
    display: block;
    width: 80%;
    max-width: 585px;
    object-fit: scale-down;
    margin: 20px auto;
}

.logo_platzhalter > img {
	width: 100%;
	height: auto;
}

.breadcrumb {
    background: var(--turkis);
    text-transform: uppercase;
    display: none;
    height: 40px;
    align-items: center;
    font-size: .875rem;
    /*box-shadow: 0 0 30px 0 rgba(0,0,0,.1);*/
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    font-weight: 600;
    z-index: 5;
}

.breadcrumb a {
    text-decoration: none;
    color: var(--darkgrey);
    -webkit-transition: color .5s ease;
    -moz-transition: color .5s ease;
    -ms-transition: color .5s ease;
    -o-transition: color .5s ease;
    transition: color .5s ease;
}

.breadcrumb a:hover,focus {
    text-decoration: underline;
}

.aktuell {
    color: rgb(100, 100, 100);
}

.space {
    margin: 0 10px;
}

.versteckt {
    display: none;
}

.video {
    display: grid;
  	place-items: center;
    place-content: center; 
    overflow: hidden;
	border-radius: 8px;
    margin: 15px;   
}

.video video {
    width: 80%;
    border-radius: 8px;
}

.bold {
    font-weight: bold;
}

.bold.explan {
    margin-bottom: 5px;
}

.explanation {
    margin-top: 5px;
}

/* ---------- Anfang Design Gallery ---------- */

.gallery {
  	margin: 15px;
  	display: grid;
  	gap: 10px;
  	place-items: center;
    place-content: center;
}

        /* 5er-Folge Anfang */

.five-same {
    grid: auto-flow / 1fr 1fr 1fr 1fr 1fr;
}

        /* 4*v + 1*h */

.five-vvvvh {
    grid: auto-flow / 0.75fr 0.75fr 0.75fr 0.75fr 1.33fr;
}

.five-vvvhv {
    grid: auto-flow / 0.75fr 0.75fr 0.75fr 1.33fr 0.75fr;
}

.five-vvhvv {
    grid: auto-flow / 0.75fr 0.75fr 1.33fr 0.75fr 0.75fr;
}

.five-vhvvv {
    grid: auto-flow / 0.75fr 1.33fr 0.75fr 0.75fr 0.75fr;
}

.five-hvvvv {
    grid: auto-flow / 0.75fr 1.33fr 0.75fr 0.75fr 0.75fr;
}

        /* 3*v + 2*h */

.five-vvvhh {
    grid: auto-flow / 0.75fr 0.75fr 0.75fr 1.33fr 1.33fr;
}

.five-vvhvh {
    grid: auto-flow / 0.75fr 0.75fr 1.33fr 0.75fr 1.33fr;
}

.five-vhvvh {
    grid: auto-flow / 0.75fr 1.33fr 0.75fr 0.75fr 1.33fr;
}

.five-hvvvh {
    grid: auto-flow / 1.33fr 0.75fr 0.75fr 0.75fr 1.33fr;
}

.five-vvhhv {
    grid: auto-flow / 0.75fr 0.75fr 1.33fr 1.33fr 0.75fr;
}

.five-vhvhv {
    grid: auto-flow / 0.75fr 1.33fr 0.75fr 1.33fr 0.75fr;
}

.five-hvvhv {
    grid: auto-flow / 1.33fr 0.75fr 0.75fr 1.33fr 0.75fr;
}

.five-vhhvv {
    grid: auto-flow / 0.75fr 1.33fr 1.33fr 0.75fr 0.75fr;
}

.five-hvhvv {
    grid: auto-flow / 1.33fr 0.75fr 1.33fr 0.75fr 0.75fr;
}

.five-hhvvv {
    grid: auto-flow / 1.33fr 1.33fr 0.75fr 0.75fr 0.75fr;
}

        /* 2*v + 3*h */

.five-vvhhh {
    grid: auto-flow / 0.75fr 0.75fr 1.33fr 1.33fr 1.33fr;
}

.five-vhvhh {
    grid: auto-flow / 0.75fr 1.33fr 0.75fr 1.33fr 1.33fr;
}

.five-hvvhh {
    grid: auto-flow / 1.33fr 0.75fr 0.75fr 1.33fr 1.33fr;
}

.five-vhhvh {
    grid: auto-flow / 0.75fr 1.33fr 1.33fr 0.75fr 1.33fr;
}

.five-hvhvh {
    grid: auto-flow / 1.33fr 0.75fr 1.33fr 0.75fr 1.33fr;
}

.five-hhvvh {
    grid: auto-flow / 1.33fr 1.33fr 0.75fr 0.75fr 1.33fr;
}

.five-vhhhv {
    grid: auto-flow / 0.75fr 1.33fr 1.33fr 1.33fr 0.75fr;
}

.five-hvhhv {
    grid: auto-flow / 1.33fr 0.75fr 1.33fr 1.33fr 0.75fr;
}

.five-hhvhv {
    grid: auto-flow / 1.33fr 1.33fr 0.75fr 1.33fr 0.75fr;
}

.five-hhhvv {
    grid: auto-flow / 1.33fr 1.33fr 1.33fr 0.75fr 0.75fr;
}

        /* 1*v + 4*h */

.five-vhhhh {
    grid: auto-flow / 0.75fr 1.33fr 1.33fr 1.33fr 1.33fr;
}

.five-hvhhh {
    grid: auto-flow / 1.33fr 0.75fr 1.33fr 1.33fr 1.33fr;
}

.five-hhvhh {
    grid: auto-flow / 1.33fr 1.33fr 0.75fr 1.33fr 1.33fr;
}

.five-hhhvh {
    grid: auto-flow / 1.33fr 1.33fr 1.33fr 0.75fr 1.33fr;
}

.five-hhhhv {
    grid: auto-flow / 1.33fr 1.33fr 1.33fr 1.33fr 0.75fr;
}

        /* 5er-Folge Ende */

        /* 4er-Folge Anfang */

.four-same {
    grid: auto-flow / 1fr 1fr 1fr 1fr;
}

        /* 3*v + 1*h */

.four-vvvh {
    grid: auto-flow / 0.75fr 0.75fr 0.75fr 1.33fr;
}

.four-vvhv {
    grid: auto-flow / 0.75fr 0.75fr 1.33fr 0.75fr;
}

.four-vhvv {
    grid: auto-flow / 0.75fr 1.33fr 0.75fr 0.75fr;
}

.four-hvvv {
    grid: auto-flow / 1.33fr 0.75fr 0.75fr 0.75fr;
}

        /* 2*v + 2*h */

.four-vvhh {
    grid: auto-flow / 0.75fr 0.75fr 1.33fr 1.33fr;
}

.four-vhvh {
    grid: auto-flow / 0.75fr 1.33fr 0.75fr 1.33fr;
}

.four-hvvh {
    grid: auto-flow / 1.33fr 0.75fr 0.75fr 1.33fr;
}

.four-vhhv {
    grid: auto-flow / 0.75fr 1.33fr 1.33fr 0.75fr;
}

.four-hvhv {
    grid: auto-flow / 1.33fr 0.75fr 1.33fr 0.75fr;
}

.four-hhvv {
    grid: auto-flow / 1.33fr 1.33fr 0.75fr 0.75fr;
}

        /* 1*v + 3*h */

.four-vhhh {
    grid: auto-flow / 0.75fr 1.33fr 1.33fr 1.33fr;
}

.four-hvhh {
    grid: auto-flow / 1.33fr 0.75fr 1.33fr 1.33fr;
}

.four-hhvh {
    grid: auto-flow / 1.33fr 1.33fr 0.75fr 1.33fr;
}

.four-hhhv {
    grid: auto-flow / 1.33fr 1.33fr 1.33fr 0.75fr;
}

        /* 4er-Folge Ende */

        /* 3er-Folge Anfang */

.three-same {
	grid: auto-flow / 1fr 1fr 1fr;
}

        /* 2*v + 1*h */

.three-vvh {
	grid: auto-flow / 0.75fr 0.75fr 1.33fr;
}

.three-vhv {
	grid: auto-flow / 0.75fr 1.33fr 0.75fr;
}

.three-hvv {
	grid: auto-flow / 1.33fr 0.75fr 0.75fr;
}

    /* 1*v + 2*h */

.three-vhh {
	grid: auto-flow / 0.75fr 1.33fr 1.33fr;
}

.three-hvh {
	grid: auto-flow / 1.33fr 0.75fr 1.33fr;
}

.three-hhv {
	grid: auto-flow / 1.33fr 1.33fr 0.75fr;
}

        /* 3er-Folge Ende */

        /* 2er-Folge Anfang */

.two-same {
	grid: auto-flow / 1fr 1fr;
}

.two-vh {
	grid: auto-flow / 0.75fr 1.33fr;
}

.two-hv {
	grid: auto-flow / 1.33fr 0.75fr;
}

        /* 2er-Folge Ende */

        /* 1er-Folge Anfang */

.one-same {
    grid: auto-flow / 0.50fr;
}

        /* 1er-Folge Ende */

.gallery > span {
  	position: relative;
  	cursor: pointer;
	overflow: hidden;
	border-radius: 8px;

}

.gallery > span.v {
  	aspect-ratio: 3/4;
}

.gallery > span.h {
  	aspect-ratio: 4/3;
}

.gallery > span.scale {
  	filter: grayscale(80%);
  	transform: scale(var(--_t,1));
  	transition: .2s linear;
}

.gallery span > a > img {
	width: 100%;
	object-fit: cover;
}

.gallery span > img {
	width: 100%;
	object-fit: cover;
}

.gallery > span.scale:hover {
  	filter: grayscale(0);
  	--_t: 1.80;
	z-index: 1;
	translate: var(--x) var(--y);
}

.gallery > span.scale:nth-child(1) {
	--x: 40%;
	--y: 40%;
}
.gallery > span.scale:nth-child(2) {
	--x: -40%;
	--y: 40%;
}
.gallery > span.scale:nth-child(3) {
	--x: 40%;
	--y: -40%;
}
.gallery > span.scale:nth-child(4) {
	--x: -40%;
	--y: -40%;
}

.gallery > span.scale:hover .beschreibung {
    	display: inline-block;
}

span.scale .beschreibung {
	display: none;
	position: absolute;
	left: 10px;
	top: 10px;
	font-weight: bold;
	font-size: .7em;
	color: var(--text);
	margin: 0px;
	padding: 5px;
	background-color: rgba(167, 255, 252, 0.4);
	border-radius: 5px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 0.5px solid rgba(255, 255, 255, 0.3);
	width: calc(100% - 2 * 10px);
	text-align: center;
}

span .titel {
	position: absolute;
	left: 0;
	bottom: 0;
	display: inline-block;
	width: 100%;
	padding: 2px 10px;
	background-color: rgba(167, 255, 252, 0.25);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	text-align: center;
}

.gallery a {
    text-decoration: none;
}

[hidden] {
    display: none;
}

dialog img {
    padding: 0;
    margin: 0;
    width: 100%;  /* Bild passt sich an verfuegbaren Raum im Dialog an */
}

dialog {
    position:relative;
}

dialog::backdrop {
    background-color: #337599;
    opacity:0.5;
}

/* ---------- Ende Design Gallery ---------- */

/* ---------- Beginn Lightbox ---------- */

#lightbox {
    border: thin solid #aaa;
    left: 1em;
    position: fixed;
    top: 1em;
}

#lightbox figure {
    position: relative;
    aspect-ratio: 16/9;
}

#lightbox img {
    display: block;
    margin: auto;
    max-width: 90vw;
    max-height: 80vh;
}

#lightbox figcaption {
    /*font-style: italic;*/
    text-align: center;
}

#lightbox button {
    position: absolute;
    top: 0;
    right: 0;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    background: transparent;
    color: transparent;
}

#lightbox #close {
    background-image: url("data:image/svg+xml,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='100' fill='firebrick' rx='10' /><path d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/></svg>");
    background-size: contain;
}

#lightbox #close:hover,
#lightbox #close:focus {
    background-image: url("data:image/svg+xml,<svg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><rect width='100' height='100' fill='red' rx='10' /><path d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/></svg>");
}

#lightbox button:nth-of-type(2) {
    top: 50%;
    left: 1%;
    width: 1rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,<svg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'><path id='right' d='M90,10 l-80,90 l80,90' fill='none' stroke='%2387ceeb' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: contain;
}

#lightbox button:nth-of-type(2):hover,
#lightbox button:nth-of-type(2):focus {
    background-image: url("data:image/svg+xml,<svg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'><path id='right' d='M90,10 l-80,90 l80,90' fill='none' stroke='%23337599' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

#lightbox button:nth-of-type(3) {
    top: 50%;
    right: 1%;
    width: 1rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,<svg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'><path id='right' d='M10,10 l80,90 l-80,90' fill='none' stroke='%2387ceeb' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: contain;
}

#lightbox button:nth-of-type(3):hover,
#lightbox button:nth-of-type(3):focus {
    background-image: url("data:image/svg+xml,<svg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'><path id='right' d='M10,10 l80,90 l-80,90' fill='none' stroke='%23337599' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

@media (prefers-reduced-motion: no-preference) {
  #lightbox[open] img {
    animation: show 0.25s ease-in-out normal;
}

@keyframes show {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ---------- Ende Lightbox ---------- */

.blog-container {
    container-type: inline-size;
    container-name: blog;
}

.blog-container .card {
    margin: 0 15px;
}

.card-bild {
    object-fit: cover;
    overflow: hidden;
    border-radius: 10px;
}

.card-bild.quadratisch {
    aspect-ratio: 1/1;
}

.card-content {
    margin: 0;
}

.blog-bild {
    width: 100%;
    object-fit: cover;
}

@container blog (min-inline-size: 500px) {
    .card {
        display: grid;
        gap: 15px;
        place-items: center;
    }

    .card.one-four {
        grid: auto-flow / 1fr 4fr;
    }
}

/* ---------- Beginn Desing blog-list ---------- */

.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    gap: 10px;
    margin: 0 auto;
    padding: 15px;
}

.blog-list .card {
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}


.blog-list .card .card-header {
    height: 100%;
    background-color: var(--turkis);
    border-radius: 8px 8px 0 0;
}

.blog-list .card-content {
    background-color: var(--grey);
}


.card-content p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
}

.blog-list .card-footer {
    height: 30px;
    text-align: center;
    font-weight: bold;
}

.blog-list .card-footer > a {
    display: inline-block;
    width: 100%;
    padding: 5px;
    color: var(--darkgrey);
    background-color: var(--turkis);
    border-radius: 0 0 8px 8px;
}

.blog-list .card-footer > a:hover, focus {
    background-color: var(--darkgrey);
    color: var(--turkis);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

/* ---------- New Blog-List ---------- */

.blog-list .card-new {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--grey);
    display: flex;
    flex-direction: column;
}

.blog-list .card-new:hover .headline {
    color: var(--turkis);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new:hover .card-content, .blog-list .card-new:hover .card-header {
    background-color: var(--darkgrey);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new:hover .card-header-bild {
    filter: brightness(0.67);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new:hover .dummy .card-header-bild {
    filter: brightness(1);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new:hover .switch .left {
    filter: grayscale(75%) brightness(0.5);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new:hover .switch .right {
    filter: grayscale(0) brightness(1);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new .card-header {
    position: relative;
    background-color: var(--grey);
    border-radius: 8px 8px 0 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new .card-header .card-header-bild {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 8px 8px 0 0;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new .switch .left {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 8px 8px 0 0;
    filter: grayscale(0) brightness(1);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new .switch .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 8px 8px 0 0;
    filter: grayscale(75%) brightness(0.5);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new .nr {
    position: absolute;
    width: 60%;
    top: 10px;
    left: 0;
    /*text-align: right;*/
    background-color: rgba(255, 193, 5, 0.75);
    border-radius: 0 18px 18px 0;
}

.blog-list .card-new .dummy .nr {
    position: absolute;
    width: 60%;
    top: 10px;
    left: 0;
    /*text-align: right;*/
    background-color: var(--orange);
    border-radius: 0 18px 18px 0;
}

.blog-list .card-new .nr h2 {
    margin: 0;
    margin-right: 12px;
    text-align: right;
}

.blog-list .card-new .card-banner {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    z-index: 100;
}

.blog-list .card-new .card-banner > img {
    width: 80px;
    aspect-ratio: 1/1;
}

.card-new .card-link {
    position: absolute;
    height: 100%;
    width: 100%;
    text-decoration: none;
}    

.blog-list .card-new .impression-observer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.blog-list .card-new .card-content {
    background-color: var(--grey);
    border-radius: 0 0 8px 8px;
    height: 100%;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blog-list .card-new .card-content .headline {
    font-size: 1.2em;
    font-weight: bold;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

/* ---------- Ende Design blog-list ---------- */

.kuerzellinks {
    width: 50px;
    height: 57px;
    position: absolute;
}

.kuerzelrechts {
    width: 50px;
    height: 57px;
    position: absolute;
}

/* ---------- Beginn Design Kontaktformular ---------- */

#kontaktformular .feld {
    width: 100%;
    display: flex;
    align-items: center;
}

#kontaktformular input {
    margin: 5px;
    height: 30px;
    border: var(--darkgrey) 1px solid;
    border-radius: 8px;
}

#kontaktformular input[type="radio"] {
    width: 20px;
}

#kontaktformular input[type="text"], #kontaktformular input[type="email"] {
    flex: 1;
}

#kontaktformular input[type="checkbox"] {
    width: 20px;
    margin-right: 0px;
    padding-bottom: 20px;
}

#kontaktformular input[type="submit"] {
    flex: 0 0 40%;
    background: var(--turkis);
}

#kontaktformular input[type="submit"]:hover,focus {
    color: var(--turkis);
    background: var(--darkgrey);

    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

#kontaktformular textarea {
    width: 100%;
    border: var(--darkgrey) 1px solid;
    border-radius: 8px;
}

#kontaktformular .radio {
    flex: 1;
    display: flex;
    align-items: center;
}

#kontaktformular .radio .inhalt {
    flex: 1;
}

#kontaktformular .less {
    padding: 9px 0 9px 0;
}

#kontaktformular .stern {
    color: #c00;
}

#kontaktformular .feld .text {
    width: 100%;
    margin-left: 15px;
    margin-right: 5px;
    margin-top: 7px;
}

#terms{
    display: none;
}

.valid {
    border: green 1px solid !important;
}

.invalid {
    border: red 1px solid !important;
}

/* ---------- Ende Design Kontaktformular ----------*/

/* ---------- Beginn Design Kommentarformular ---------- */

#kommentare {
    margin: 15px;
}

#kommentare .feld {
    position: relative;
    width: 100%;
}

#kommentare #kommentarForm {
    display: grid;
    gap: 15px;
    justify-items: center
}

#kommentare .feld.d5 { 
    text-align: center;
}

#kommentare .feld .input {
    all: unset;
    width: calc(100% - 10px - 11px);
    padding: 10px;
    border: var(--border) 1px solid;
    border-radius: 10px;
    transition:150ms cubic-bezier(0.4, 0, 0.2, 1);
}

#kommentare .feld .textarea {
    all: unset;
    width: calc(100% - 10px - 11px);
    padding: 10px;
    border: var(--border) 1px solid;
    border-radius: 10px;
    transition:150ms cubic-bezier(0.4, 0, 0.2, 1);
}

#kommentare .feld .label {
    position: absolute;
    top: 10px;
    left: 10px;
    pointer-events: none;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

#kommentare .feld .input:is(:focus, :valid) ~ label {
    transform: translateY(-100%) scale(0.8);
    padding-inline: 2px;
    background-color: var(--bg-grey);
    color: var(--border);
}

#kommentare .feld .textarea:is(:focus, :valid) ~ label {
    transform: translateY(-100%) scale(0.8);
    padding-inline: 2px;
    background-color: var(--bg-grey);
    color: var(--border);
}

#kommentare .feld .submit {
    all: unset;
    width: 50%;
    border-radius: 10px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

#kommentare .feld .submit:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.returnMessage {
    margin: 15px;
    border-radius: 8px;
    border: sild 1px var(--border);
    padding: 10px;
}

.returnMessage.okay {
    background-color: lightgreen;
}

.returnMessage.error {
    background-color: lightcoral;
}

/* ---------- Ende Design Kommtarformular ---------- */

/* ---------- Beginn Design Kommentare ---------- */

.commentBox {
    position: relative;
    border-top: solid 1px #e5e5e5;
    border-left: solid 1px #e5e5e5;
    border-bottom: solid 1px #bdbdbd;
    border-right: solid 1px #bdbdbd;
    background-color: #d1d1d1;
    border-radius: 8px;
    margin: 20px;
}

.commentBox .commentContent {
    margin: 10px;
    min-height: 90px;
    background-image: linear-gradient(to right, #ccfffd 0%, #ccfffd 20%, #dcdcdc 80%);
    border-bottom: solid 1px #e5e5e5;
    border-right: solid 1px #e5e5e5;
    border-top: solid 1px #bdbdbd;
    border-left: solid 1px #bdbdbd;
    border-radius: 8px;
} /*  */

.commentBox .commentContent p {
    margin: 5px;
}

.commentBox .commentData .user {
    height: 40px;
    display: grid;
    grid: auto-flow / 40px 1fr;
    align-items: center;
}

.commentBox .commentData .user .userlogo {
    display: block;
    width: 40px;
    aspect-ratio: 1/1;
    object-fit: cover;
    overflow: hidden;
}

.commentBox .commentData .user .username {
    display: block;
    margin: 0;
    margin-left: 10px;
}

.commentBox .commentData .userdates {
    margin: 5px 0;
}

.commentBox .commentReplay {
    display: grid;
    grid: auto-flow / 1fr 30px;
    margin: 0 10px;
}

.commentBox .commentRespond {
    display: grid;
    height: 30px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.commentBox .commentRespond:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.commentBox .commentAnswer {
    display: inline-block;
    height: 30px;
    margin-bottom: 5px;
}

.commentBox .commentAnswer .answerGrid {
    display: grid;
    height: 30px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    overflow: hidden;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
    transition: all 0.3s;
}

.commentBox .commentAnswer .answerGrid:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.commentBox .commentAnswer .answerGrid p {
    margin: 0;
}

.commentBox .commentAnswer .answerGrid p i {
    transform: rotate(0deg);
    transition: all 0.3s;
}

.commentBox .commentAnswer .answerGrid p i.is-activ {
    transform: rotate(180deg);
}

#commentArea #commentText.shown {
    padding: 10px;
    border: solid 1px var(--border);
    border-radius: 8px;
}

#commentArea #abbrechen {
    display: none;
    margin: 15px;
}

#commentArea #abbrechen .answer_cancel {
    all: unset;
    padding: 10px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

#commentArea #abbrechen .answer_cancel:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.commentBox .answer {
    margin: 10px;
    background-color: #dcdcdc;
    border-bottom: solid 1px #e5e5e5;
    border-right: solid 1px #e5e5e5;
    border-top: solid 1px #bdbdbd;
    border-left: solid 1px #bdbdbd;
    border-radius: 8px;
}

.commentBox .answer .textarea {
    all: unset;
    margin: 5px;
    width: 100%;
}

/* ---------- Ende Design Kommentare ---------- */

/* ---------- Beginn Overlay Bilder mit Schieber ---------- */

.img-comp-container {
    position: relative;
    margin: 15px auto;
    overflow: hidden;
    border-radius: 15px;
}

.img-comp-img {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden;
}

.img-comp-img img {
    display: block;
}

.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    /*set the appearance of the slider:*/
    width: 40px;
    height: 40px;
    background-color: var(--turkis);
    opacity: 0.7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-comp-slider i {
    color: var(--text);
    font-size: 1.3em;
}

.line-top {
    border-top: var(--border) 1px solid;
    padding-top: 15px;
}

.paypal {
    overflow: hidden;
}

.paypal-button {
    display: block;
    margin: 15px;
    padding: 15px 30px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    transition: all 0.5s;
}

.paypal-button:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

/* ---------- Ende Overlay Bilder mit Schieber ---------- */

.ammap {
    aspect-ratio: 3/2; /*8/5*/;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px;
}

.ammap #mapdiv {
    width: 100%;
    height: 100%;
    background-color: #EEEEEE;
    overflow: hidden;
    text-align: left;
}

/* ---------- Beginn Design Registation und Anmeldung ---------- */

.paragraph {
    width: 100%;
}

.paragraph > a {
    all: unset;
}

.paragraph .form {
    width: 60%;
    margin: 10px auto;
    display: grid;
}

.form .gender {
    margin: 10px 0;
}


.form .feld {
    position: relative;
    width: 100%;
    margin: 10px 0;
}

.form .feld .input {
    all: unset;
    width: calc(100% - 22px);
    padding: 10px;
    border: var(--border) 1px solid;
    border-radius: 10px;
    transition:150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form .feld #complexity {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border: var(--border) 1px solid;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    background-color: #ccc;
}

.form .feld #complexity.default {
    background-color: #ccc;
}

.form .feld #complexity.weak {
    /*background-color: #FF5353;*/
    background: linear-gradient(90deg, #ccc 0%, #ff5353 25%, #ccc 25% 100%);
}

.form .feld #complexity.strong {
    /*background-color: #FAD054;*/
    background: linear-gradient(90deg, #ccc 0%, #ff5353 25%, #ffaa53 50%, #ccc 50% 100%);
}

.form .feld #complexity.stronger {
    /*background-color: #93C9F4;*/
    background: linear-gradient(90deg, #ccc 0%, #ff5353 25%, #ffaa53 50%, #ffff53 75%, #ccc 75% 100%);
}

.form .feld #complexity.strongest {
    /*background-color: #B6FF6C;*/
    background: linear-gradient(90deg, #ccc 0%, #ff5353 25%, #ffaa53 50%, #ffff53 75%, #54ff53 100%);
}

.form .feld .label {
    position: absolute;
    top: 10px;
    left: 10px;
    pointer-events: none;
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form .feld .input:is(:focus, :valid) ~ label {
    transform: translateY(-100%) scale(0.8);
    padding-inline: 2px;
    background-color: var(--bg-grey);
    color: var(--border);
}

.form .feld .submit {
    all: unset;
    width: calc(100% - 22px);
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

.form .feld .submit:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.paragraph .form a.submit {
    display: block;
    width: calc(100% - 2px);
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

.paragraph .form a.submit:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

.paragraph .form a.submit.notExist {
    display: block;
    width: calc(100% - 2px);
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    background-color: var(--darkgrey);
    color: var(--turkis);
    font-weight: bold;
    cursor: default;
}

.paragraph .form .zurueck {
    color: #ff2d21;
    font-weight: bold;
}

/* ---------- Ende Design Registation und Anmeldung ---------- */

/* ---------- Beginn Design Backend ---------- */

/*#backend_release .feld {
    width: 100%;
    text-align: center;
    position: relative;
}

#backend_release .feld .submit {
    all: unset;
    display: block;
    width: 50%;
    margin: 0 auto;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--turkis);
    color: var(--darkgrey);
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
}

#backend_release .feld .submit:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}*/

/* ---------- Ende Design Backend ---------- */

.farben {
    display: flex;
    align-items: center;
    justify-content: center;
}

.farben .blank {
    display: grid;
    grid: auto-flow / 1fr 1fr;
    width: 75%;
    gap: 20px;
    padding: 20px;
    border: solid 1px var(--border);
    border-radius: 15px;
    background-color: white;
}

.farben .blank .turkis {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: var(--turkis);
    border-radius: 8px;
}

.farben .blank .grau {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: var(--bg-grey);
    border-radius: 8px;
}

.farben .blank .pantone325c {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #64ccc9;
    border-radius: 8px;
}

.farben .blank .schattenweiss {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #D7D7D5;
    border-radius: 8px;
}

/* ---------- Design Index-Seite ---------- */

.start {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(60deg, rgba(8, 255, 245, 1) 0%, rgba(220, 220, 220, 1) 60%, rgba(220, 220, 220, 1) 100%);
}

#bluescreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(60deg, rgba(8, 255, 245, 1) 0%, rgba(220, 220, 220, 1) 60%, rgba(220, 220, 220, 1) 100%);
    z-index: 3;
}

#bluescreenMobil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(30deg, rgba(8, 255, 245, 1) 0%, rgba(220, 220, 220, 1) 60%, rgba(220, 220, 220, 1) 100%);
    z-index: 3;
}

#bluescreenMobil {
    visibility: hidden;
}

#picture {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    aspect-ratio: 750/1000;
    z-index: 5;
    visibility: visible;
    opacity: 0;
    background: url("bilder/wir_start.jpg") no-repeat right bottom;
    background-size: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    border-radius: 40px;
}

#bluescreenMobil .picMobil {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    aspect-ratio: 750/1000;
    z-index: 5;
    background: url("bilder/wir_start.jpg") no-repeat right bottom;
    background-size: 100%;
    display: flex;
    align-items: end;
    justify-content: center;
    border-radius: 40px;
}

#bluescreenMobil .picMobil #text-index-button {
    all: unset;
    display: block;
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--turkis);
    color: var(--text);
    font-weight: bold;
    font-size: 0.9em;
    transition: all 0.5s;
}

#bluescreenMobil .picMobil #text-index-button:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

#bluescreenMobil .logoMobil {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 70px;
    z-index: 10;
    padding: 10px;
}

#bluescreenMobil .logoMobil > img {
    height: 100%;
}

#bluescreenMobil .sayingMobil {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    width: 80%;
    z-index: 30;
    aspect-ratio: 1304.942/821.375;
    display: flex;
    justify-content: center;
    align-items: end;
}

#bluescreenMobil .sayingMobil .saying {
    margin: 0;
    font-family: italianno, "tiranti solid let", "lucida calligraphy", "monotype corsiva", fantasy;
    font-weight: bold;
    line-height: 1.1;
    font-size: 1.6em;
    text-align: center;
}

#picture #text-index-button {
    all: unset;
    display: block;
    margin-bottom: 15px;
    padding: 10px 20px;
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--turkis);
    color: var(--text);
    font-weight: bold;
    font-size: 1.3em;  /* 1920 * 0,000677 */
    opacity: 0;
    zoom: 1;
    transition: all 0.5s;
}

#picture #text-index-button:hover {
    background-color: var(--darkgrey);
    color: var(--turkis);
}

#picture #text-index-button > i,
#bluescreenMobil .picMobil #text-index-button > i {
    transform: rotate(180deg);
}

#logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 10;
    opacity: 0;
}

#logo #img-logo {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#felia {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 10.5%;
    z-index: 15;
    opacity: 0;
}

#felia #img-felia {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#logo-felia {
    position: absolute;
    right: 100px; /* calc(100% - 20px - 200px); */
    bottom: 42px; /* 20px */
    z-index: 20;
    width: 12px; /* 200px */
    opacity: 0;
}

#logo-felia #img-logo-felia {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#logo-felia-big {
    position: absolute;
    z-index: 20;
    aspect-ratio: 1/1;
    visibility: hidden;
}

#logo-felia-big #img-logo-felia {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#qr-codes {
    position: absolute;
    left: 40px;
    top: 40px;
    z-index: 25;
    width: 0%;
    aspect-ratio: 1326.070/991.570;
    opacity: 0;
    display: grid;
    align-content: space-between;
}

#qr-codes > a {
    cursor: pointer;
    filter: invert(0);
    transition: all 0.5s;
}

#qr-codes > a:hover {
    filter: invert(1);
}

#qr-codes .qr-codes {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#saying {
    position: absolute;
    right: 40px;
    top: 43%;
    width: 31%;
    z-index: 30;
    aspect-ratio: 1304.942/821.375;
    display: flex;
    justify-content: center;
    align-items: center;
}

#saying .saying {
    margin: 0;
    font-family: italianno, "tiranti solid let", "lucida calligraphy", "monotype corsiva", fantasy;
    font-weight: bold;
    line-height: 1.1;
    opacity: 0;
}

.texte {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-size: 0.6em;
}

/* ---------- Design Index-Seite ---------- */

/* ---------- Ende allgemeines Design ---------- */




/* ---------- Beginn Design fuer breite Browserfenster ---------- */

@media only screen and ( min-width: 1280px ) {


    .verspielt {
        font-size: 1.3em;
    }

    .site {
        padding-top: 100px;
        padding-bottom: 0;
    }

    .header {
        height: 100px;
        /*-webkit-transition: padding-top .2s ease;
        -moz-transition: padding-top .2s ease;
        -ms-transition: padding-top .2s ease;
        -o-transition: padding-top .2s ease;*/
    }

    .header .header-inner {
        display: flex;
        justify-content: space-between;
    }

    .row {
        max-width: 1280px;
        margin: 0 auto;
        width: 100%;
        padding: 0 20px;
        padding-top: 20px;
   }

    .header .header-inner .main-nav {
        padding-top: 9px;
        margin-left:20px;
        /*width: calc(100% - 2360px);*/
        flex: 1;
        /*-webkit-transition: padding-top .2s ease;
        -moz-transition: padding-top .2s ease;
        -ms-transition: padding-top .2s ease;
        -o-transition: padding-top .2s ease;*/
    }

    .menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .main-nav .menu {
        display: flex;
    }

    .main-nav .menu .menu-item {
        position: relative;
        flex: 1;
        margin: 0 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    @keyframes shimmer {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .main-nav .menu .menu-item.current {
        background-image: linear-gradient(45deg, #f70f0f, #de6afc, #fadb51, #3df7af, #fc2c6b);
        background-size: 200% 200%;
        animation: shimmer 5s ease infinite; /* Animation anwenden */
    }

    .main-nav .menu .menu-item.every {
        border: 1px solid var(--darkgrey);
        box-shadow: 2px 2px 4px 0px rgb(0, 0, 0, .3);
    }

    .sub-menu .menu-item > a.sub {
        display: inline-block;
        width: 100%;
        color: var(--darkgrey);
        background-color: var(--turkis);
        padding-top: 11px;
        padding-bottom: 11px;
        border-radius: 9px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        font-size: 1.1em;
        z-index: 10;
    }

    .main-nav .menu .menu-item > a.main {
        display: inline-block;
        width: 98%;
        height: 96%;
        color: var(--darkgrey);
        background-color: var(--turkis);
        padding-top: 11px;
        padding-bottom: 11px;
        border-radius: 9px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        font-size: 1.1em;
        z-index: 10;
    }


    .main-nav .menu .menu-item > a:hover,focus {
        background-color: var(--darkgrey);
        color: var(--turkis);
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
    }

    .main-nav .menu .menu-item > .sub-menu {
        visibility: hidden;
        position: absolute;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
        width: 250px;
        top: 54px;
        left: 50%;
        height: auto;
        margin-left: calc(-250px / 2);
        /*z-index: 1;*/
        -webkit-transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
        -moz-transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
        -ms-transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
        -o-transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
        transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
    }

    .main-nav .menu .menu-item:hover > .sub-menu {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
        visibility: visible;
    }

    .main-nav .menu .menu-item > .sub-menu .menu-item {
        display: block;
        margin: 0;
        padding: 0 12px;
    }

    .main-nav .menu .menu-item:hover > .sub-menu .menu-item {
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
    }

    .main-nav .menu .menu-item #banner {
        position: absolute;
        top: 0;
        right: 0;
        width: 33px;
        z-index: 200;
    }

    .main-nav .menu .menu-item #banner > img {
        width: 33px;
        aspect-ratio: 1/1;
    }

    .easteregg {
        width: 238px; /*167px;*/
        height: 100px; /*70px;*/
        background: url('bilder/logo_die_weltgeniesser_komplett_grau.png') 0 0 no-repeat transparent;
        background-size: cover;
    }

    .easteregg:hover,focus {
        background: url('bilder/logo_die_weltgeniesser_komplett_grau.gif') 0 0 no-repeat transparent;
        background-size: cover;
    }

    label.hamburg {
        display: none;
    }

    .kopf-bild {
        max-width: 1280px;
        aspect-ratio: 1000/350;
        margin: 0 auto;
        margin-top: 25px;
        -webkit-border-top-right-radius: 22px;
        -webkit-border-bottom-right-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -webkit-border-top-left-radius: 22px;
        -moz-border-radius-topright: 22px;
        -moz-border-radius-bottomright: 0;
        -moz-border-radius-bottomleft: 0;
        -moz-border-radius-topleft: 22px;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 22px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }

    /* ---------- Beginn Design neue Index-Seite ---------- */

    .index {
        max-width: 1800px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .index .index-content {
        display: grid;
        grid: auto-flow / 0.5556fr 0.4444fr;
        border-radius: 15px;
        overflow: hidden;
    }

    .index .index-content .bild {
        aspect-ratio: 2/1;
    }

    .index .index-content .bild img {
        width: 100%;
        object-fit: cover;
    }

    .index .index-content .anmeldung {
        background-color: var(--turkis);
        display: grid;
        grid: auto-flow / 1fr 1fr;
        grid-template-rows: 1fr;
        place-content: center;
        place-items: center;
    }

    .index .index-content .anmeldung .gast {
        color: var(--text);
    }

    .index .index-content .anmeldung .user {
        width: 100%;
        min-height: 100%;
        background-color: var(--darkturkis);
        color: var(--grey);
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        text-align: center;
        align-content: center;
    }

    /* ---------- Ende Design neue Index-Seite ----------*/

    .action-bar {
    	grid-template-columns: minmax(215px, 260px) minmax(330px, 1fr) minmax(215px, 260px) ;
    	padding: 0 30px;
    }

    .action-bar .action-overlay {
    	display: none;
    }

    .action-bar .headline > h4 {
    	display: none;
    }

    .action-bar .action-content .social-media-links, .action-bar .social-media {
        display: grid;
        gap: 7px;
        grid: auto-flow / 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .action-bar .action-content .search-channels {
        justify-content: flex-end;
    }

    .action-bar .action-content .searchform {
        width: 255px;
    }

    .site-content {
        display: flex;
        flex-wrap: wrap;
    }

    .site-content .sidebar {
        width: 350px;
        background: var(--bg-grey);
    }

    .main-content {
    	padding: 20px;
    }

    .boxes {
    	margin: 0px 32px;
    }

    .nav-bar {
        position: relative;
        box-shadow: none;
        height: unset;
        display: block;
    }

    .nav-bar.has-toc {
        height: 100%;
        padding-bottom: 0;
    }

    .nav-content {
        display: block;
        position: relative;
        height: 100%;
        left: unset;
        width: 100%;
        right: unset;
        top: unset;
        padding-top: 20px;
        border-right: 1px solid var(--border);
        background: var(--nav-grey);
    }

    .nav-content.fixed {
        position: fixed;
        width: 350px;
        padding-top: 20px;
        top: 100px;
    }

    .nav-content.sticky-bottom {
        overflow: hidden;
        position: absolute;
        bottom: 0;
        height: auto !important;
        width: 100%;
        z-index: 2 !important;
    }

    .nav-content .nav-container {
        padding: 20px;
        max-height: 558px;
        overflow-y: auto;
    }

    .nav-content .nav-container ul {
        display: block;
        height: auto;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background: var(--bg-grey);
        border: 1px solid var(--darkgrey);
    }

    .kuerzellinks {
        top: 20px;
        left: 20px;
    }

    .kuerzelrechts {
        top: 20px;
        right: 20px;
    }


    .footer-content {
        width: 60%;
        height: 100%;
        margin: 0 auto;
        display: flex;
    }

    #test {
        width: 1000px;
        height: 350px;
        margin: 0 auto;
        background: url('bilder/home_wir_klein1.jpg') 0 0 no-repeat transparent;
        border-radius: 20px;
        /*background-color: blue;*/
    }

    .breadcrumb {
        display: flex;
        position: absolute;
        left: 20px;
        bottom: 20px;
        padding: 20px;
    }

    .countdown {
    	width: 65%;
    }

    /*---------- Beginn Design Kontaktformular ----------*/

    #kontaktformular {
        width: 47%;
        margin: 0 auto;
        box-sizing: inherit;
    }

    #kontaktformular label {
        width: 100px;
        margin-left: 15px;
    }

    #kontaktformular input[type="checkbox"] {
        margin-left: 15px;
    }

    #kontaktformular textarea {
        margin: 0 5px 0 15px;
    }

    /* ---------- Ende Design Kontaktformular ---------- */

    /* ---------- Beginn Design Kommentarformular ---------- */

    #kommentare #kommentarForm {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 1fr);
    }

    #kommentare .feld.d1 { grid-area: 1 / 1 / 2 / 2; }
    #kommentare .feld.d2 { grid-area: 1 / 2 / 2 / 3; }
    #kommentare .feld.d3 { grid-area: 2 / 1 / 7 / 3; }
    #kommentare .feld.d4 { grid-area: 7 / 1 / 8 / 3; }
    #kommentare .feld.d5 { grid-area: 8 / 1 / 9 / 3;
    }

    #kommentare .feld .textarea {
        height: calc(100% - 10px - 11px);
    }

    #kommentare .feld .submit {
        height: calc(100% - 1px);
    }

    /* ---------- Ende Design Kommtarformular ---------- */

    /* ---------- Beginn Design Kommentare ---------- */

    .commentBox {
        display: grid;
        grid: auto-flow / 1fr 200px;
        column-gap: 5px;
        row-gap: 5px;
    }

    .commentBox .commentData p {
        margin: 10px;
    }

    .commentBox .commentAnswer .answerGrid {
        width: 180px;
    }

    .commentBox .commentData {
        margin: 10px 5px;
    }

    /* ---------- Ende Design Kommentare ---------- */

    /* ---------- Beginn Overlay Bilder mit Schieber ---------- */

    .img-comp-container {
        width: 600px;
        height: 450px;
    }

    .img-comp-img img {
        width: 600px;
        height: 450px;
    }

    /* ---------- Ende Overlay Bilder mit Schieber ---------- */

    section #paypal {
        display: none;
    }

    #nav-container #paypal {
        margin: 15px 0;
    }

    #nav-container .spalten {
        margin: 19px 0;
    }

}

/* ---------- Ende Design fuer breite Browserfenster ---------- */




/* ---------- Beginn Design fuer mittlere Bildschirme & Tabletts ---------- */

@media only screen and ( min-width: 800px ) and ( max-width: 1279px ) {


    .verspielt {
        font-size: 1.3em;
    }

    .countdown {
        width: 65%;
    }

    .cd {
        font-size: 2em;
        margin: 0;
        padding: 0;
    }

    .countdown-feld .text {
        font-size: 0.9em;
        margin: 10px 5px;
    }

    .main-nav {
        /*display: none;*/
    }

    .header {
        height: 100px;
    }

    .header .header-inner {
        display: flex;
        justify-content: left;
    }

    .row {
    	margin: 0;
    	width: 100%;
       	padding: 0 20px;
        padding-top: 20px;
    }

    .header .header-inner .main-nav {
        display: none;
    }

    .easteregg {
        width: 167px;
        height: 70px;
        background: url('bilder/logo_die_weltgeniesser_komplett_grau.png') 0 0 no-repeat transparent;
        background-size: cover;
    }

    .easteregg:hover,focus {
        background: url('bilder/logo_die_weltgeniesser_komplett_grau.gif') 0 0 no-repeat transparent;
        background-size: cover;
    }

    .kopf-bild {
        width: 100%;
        aspect-ratio: 1000/350;
        margin: 0 auto;
        margin-top: 35px;
        -webkit-border-top-right-radius: 11px;
        -webkit-border-bottom-right-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -webkit-border-top-left-radius: 11px;
        -moz-border-radius-topright: 11px;
        -moz-border-radius-bottomright: 0;
        -moz-border-radius-bottomleft: 0;
        -moz-border-radius-topleft: 11px;
        border-top-right-radius: 11px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 11px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }

    .action-bar {
    	grid-template-columns: minmax(215px, 260px) minmax(330px, 1fr) minmax(215px, 260px) ;
    	padding: 0 10px;
    }

    .action-bar .social-media-links, .action-bar .social-media {
        display: grid;
        gap: 7px;
        grid: auto-flow / 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .action-bar .search-channels {
        justify-content: flex-end;
    }

    .action-bar .searchform {
        /*margin-right: 15px;*/
        width: 100%;
    }

    .sidebar {
        display: none;
    }

    .nav-content {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        height: 0;
    }

    .footer-content {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: flex;
    }

    .footer .sign {
        display: none;
    }

    .mobile-menu {
        overflow-y: auto;
    }

    .mobile-menu > a {
        text-decoration: none;
        position: absolute;
        top: 12px;
        left: 20px;
        color: #fff;
        font-size: 30px;
    }

    .spalten {
        /*flex-basis: 400px;*/
    }

    .kuerzellinks {
        top: 15px;
        left: 15px;
    }

    .kuerzelrechts {
        top: 15px;
        right: 15px;
    }

    .breadcrumb {
        display: flex;
        position: absolute;
        left: 10px;
        bottom: 10px;
        padding: 10px;
    }

    /* ---------- Beginn Design Kontaktformular ---------- */

    #kontaktformular {
        width: 80%;
        margin: 0 auto;
        box-sizing: inherit;
    }

    #kontaktformular label {
        width: 30%;
    }

    #kontaktformular textarea {
        padding: 5px;
    }

    /* ---------- Ende Design Kontaktformular ---------- */

    .kopf-overlay .overlay-content {
        margin-top: 10px;
        border-radius: 10px;
    }
    
        .kopf-overlay .overlay-content > h1 {
        margin: 0;
    }
        
        .kopf-overlay .overlay-content > h3 {
        display: none;
    }

    /* ---------- Beginn Design Kommentarformular ---------- */

    #kommentare #kommentarForm {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 1fr);
    }

    #kommentare .feld.d1 { grid-area: 1 / 1 / 2 / 2; }
    #kommentare .feld.d2 { grid-area: 1 / 2 / 2 / 3; }
    #kommentare .feld.d3 { grid-area: 2 / 1 / 7 / 3; }
    #kommentare .feld.d4 { grid-area: 7 / 1 / 8 / 3; }
    #kommentare .feld.d5 { grid-area: 8 / 1 / 9 / 3;
    }

    #kommentare .feld .textarea {
        height: calc(100% - 10px - 11px);
    }

    #kommentare .feld .submit {
        height: calc(100% - 1px);
    }

    /* ---------- Ende Design Kommtarformular ---------- */

    /* ---------- Beginn Design Kommentare ---------- */

    .commentBox {
        display: grid;
        grid: auto-flow / 1fr 200px;
        column-gap: 5px;
        row-gap: 5px;
    }

    .commentBox .commentData p {
        margin: 10px;
    }

    .commentBox .commentAnswer .answerGrid {
        width: 180px;
    }

    .commentBox .commentData {
        margin: 10px 5px;
    }

    /* ---------- Ende Design Kommentare ---------- */

    /* ---------- Beginn Overlay Bilder mit Schieber ---------- */

    .img-comp-container {
        width: 600px;
        height: 450px;
    }

    .img-comp-img img {
        width: 600px;
        height: 450px;
    }

    /* ---------- Ende Overlay Bilder mit Schieber ---------- */

}

/* ---------- Ende Design fuer mittlere Bildschirme & Tabletts ---------- */





/* ---------- Beginn Design fuer mobilie Geraete ---------- */

@media only screen and ( max-width: 799px ) {


    .verspielt {
        font-size: 1.3em;
    }

    .countdown {
        width: 80%;
    }
    
    .cd {
        font-size: 1.9em;
        margin: 0;
        padding: 0;
    }
    
    .countdown-feld .text {
        font-size: 0.85em;
        margin: 10px 5px;
    }

    .main-nav {
        /*display: none;*/
    }

    .header {
        height: 100px;
        /*-webkit-transition: padding-top .2s ease;
        -moz-transition: padding-top .2s ease;
        -ms-transition: padding-top .2s ease;
        -o-transition: padding-top .2s ease;*/
    }

    .header .header-inner {
        display: flex;
        justify-content: left;
    }

    .row {
    	margin: 0;
    	width: 100%;
       	padding: 0 20px;
        padding-top: 20px;
    }

    .header .header-inner .main-nav {
        display: none;
    }

    .easteregg {
        width: 167px;
        height: 70px;
        background: url('bilder/logo_die_weltgeniesser_komplett_grau.png') 0 0 no-repeat transparent;
        background-size: cover;
    }

    .easteregg:hover,focus {
        background: url('bilder/logo_die_weltgeniesser_komplett_grau.gif') 0 0 no-repeat transparent;
        background-size: cover;
    }

    .kopf-bild {
        width: 100%;
        aspect-ratio: 1000/350;
        margin: 0 auto;
        margin-top: 35px;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -webkit-border-top-left-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 0;
        -moz-border-radius-bottomleft: 0;
        -moz-border-radius-topleft: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 8px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }

    .action-bar {
    	grid-template-columns: 1fr;
    	padding: 0 10px;
    }

    .action-bar .social-media, .action-bar .social-media-links, .action-bar .search-channels form {
    	display: none;
    }

    .sidebar {
        display: none;
    }

    #sidebarMenu .social-media {
        display: grid;
        margin: 0 10px;
        gap: 8px;
        grid-template-columns: repeat(6, 1fr);
        align-items: center;
    }

    #sidebarMenu .social-media .social-media-item {
        width: 30px;
    }

    #sidebarMenu .social-media .social-media-item.none {
        display: none;
    }

    .nav-content {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        height: 0;
    }

    .footer-content {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: flex;
    }

    .footer .sign {
        display: none;
    }

    .mobile-menu {
        overflow-y: auto;
    }

    .mobile-menu > a {
        text-decoration: none;
        position: absolute;
        top: 12px;
        left: 20px;
        color: #fff;
        font-size: 30px;
    }

    .spalten {
        /*flex-basis: 400px;*/
    }

    .kuerzellinks {
        width: 50px;
        height: 57px;
        top: 10px;
        left: 10px;
        position: absolute;
    }

    .kuerzelrechts {
        width: 50px;
        height: 57px;
        top: 10px;
        left: 10px;
        position: absolute;
    }


    /* ---------- Beginn Design Kontaktformular ---------- */

    #kontaktformular {
        width: 80%;
        margin: 0 auto;
        box-sizing: inherit;
    }

    #kontaktformular label {
        width: 30%;
    }

    #kontaktformular textarea {
        padding: 5px;
    }

    /* ---------- Ende Design Kontaktformular ---------- */

    .kopf-overlay .overlay-content {
        margin-top: 10px;
        border-radius: 10px;
    }
    
    .kopf-overlay .overlay-content > h1 {
        margin: 0;
    }
        
    .kopf-overlay .overlay-content > h3 {
        display: none;
    }

    /* ---------- Beginn Design Kommentarformular ---------- */
 
    #kommentare .feld .textarea {
        height: 250px;
    }

    #kommentare .feld .submit {
        height: 35px;
    }

    #kommentare .feld.d4 > input {
        margin: 5px 10px 5px 0;
    }

    /* ---------- Ende Design Kommtarformular ---------- */

    /* ---------- Beginn Design Kommentare ---------- */

    .commentBox {
        display: flex;
        flex-direction: column-reverse;
    }

    .commentBox .commentData p {
        margin: 0 10px;
    }

    .commentBox .commentAnswer .answerGrid {
        width: 160px;
    }

    .commentBox .commentData {
        margin: 10px;
    }

    /* ---------- Ende Design Kommentare ---------- */

    /* ---------- Beginn Overlay Bilder mit Schieber ---------- */

    .img-comp-container {
        width: 260px;
        height: 195px;
    }

    .img-comp-img img {
        width: 260px;
        height: 195px;
    }

    #account {
        display: none;
    }

    /* ---------- Ende Overlay Bilder mit Schieber ---------- */

}

/* ---------- Ende Design fuer mobilie Geraete ---------- */