*,*::after,*::before {margin:0;padding:0;text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box}
body,html {width:100%;height:100%;padding:0;margin:0;border:0}
body {font-family:Montserrat;font-size:1vmax;color:rgba(255,255,255,1);background-color:#A1A1A1}

/* Allgemeines */
p {clear:both}
a {color:rgba(255,255,255,1)}                                                                 /* Allgemeine Verzweigung */
p.info {border-top:1px solid white;margin:0px;padding-top:14px}                               /* Titel-Unterstrich */

/* Schönerer vertikaler Scrollbalken - Firefox ist leider resistent */
::-webkit-scrollbar {width:10px}
::-webkit-scrollbar-track {background:rgba(0, 0, 0, 0.1)}
::-webkit-scrollbar-thumb {background:rgba(0, 0, 0, 0.5)}

/* Überschriften */
h1 {font-family:Montserrat;font-size:2vmax;font-weight:bold}
h2 {font-family:Montserrat;font-size:1.5vmax;font-weight:bold}
h3 {font-family:Montserrat;font-size:1.5vmax}
h4 {font-family:Montserrat;font-size:1vmax}
h5 {font-family:Montserrat;font-size:0.7vmax}

/* Bilder */
img.port {float:left;max-width:22%;max-height:22%;padding:1%}                                 /* Bilder in Portrait */
img.ind {float:right;margin-bottom:20px;max-width:90%}                                        /* bühler ag Schriftzug auf Index */
img.logo {position:absolute;z-index:60;top:8px;right:20px;max-width:22%;max-height:12%}       /* bühler ag mit Mutz-Küchen Schriftzug */
img.verb {position:absolute;z-index:60;bottom:1px;left:1px;max-width:22%;max-height:12%}      /* Verband Küche Schweiz Logo */
img.pikto {max-width:3%;max-height:3%;vertical-align:middle}                                  /* Platzierung Piktogramm */

/* Inhaltsbox, Kasten und Zusätze */
#map {z-index:50;height:500px;max-width:100%;margin:1%}                                       /* Google Map Formatierung */
#inh {position:absolute;top:36px;width:100%;height:94%;left:0;z-index:40;overflow:auto}       /* Inhalts-Box */
.kasten {position:absolute;top:20%;right:14%;width:40%;padding:10px}                          /* Standardposition oben rechts */
.links {right:auto;left:14%}                                                                  /* Position links */
.mitte {top:40%}                                                                              /* Position mittig */
.unten {top:60%}                                                                              /* Position unten */
.txtgr {font-size:1.5vmax}                                                                    /* Text gross */
.txtre {text-align:right}                                                                     /* Text rechts */
.schatt {background:rgba(50,50,50,0.4)}                                                       /* Schattierung */
.schwarz {color:rgba(0,0,0,1)}                                                                /* Schriftfarbe schwarz */
#gal {position:absolute;top:36px;width:100%;height:99%;left:0;z-index:40;overflow:auto}       /* Galerie-Box */

ul.lemma {list-style-type:disc;list-style-position:outside;padding-left:4%}                   /* Definition Punktlisten */
.check {display:none}                                                                         /* Kontrollfelder für Formular */
.formular {width:100%;margin:1% auto}

.formular input[type="text"],
.formular input[type="email"],
.formular textarea,
.formular select
{   width: 100%;
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    margin-bottom: 2%;
    font-family:Montserrat;font-size:0.8vmax;color:rgba(255,255,255,1)}

.formular textarea{resize:none;overflow:hidden;height:1vmax}

.formular input[type="button"]{
    -webkit-box-shadow: inset 0px 1px 0px 0px #A1A1A1;
    box-shadow: inset 0px 1px 0px 0px #A1A1A1;
    background-color: transparent;
    border: 1px solid #FFF;
    border-radius: 30px;
    display: inline-block;
    cursor: default;
    font-family:Montserrat;font-size:0.8vmax;color:rgba(255,255,255,1);
    text-decoration: none;
    text-transform: uppercase;
    padding: 8px 18px;
}
.formular input[type="button"]:hover{background-color:rgba(255,255,255,1);color:rgba(0,0,0,1);}

/* Menü mit mobilen Elementen */
.menu {position:absolute;width:100%;z-index:50;background:rgba(50,50,50,0.1);font-size:2vmax;font-weight:bold}
.menu_name {color:#fff;display:block;padding:6px 12px;width:inherit;background:rgba(50,50,50,0.3)}
.menu_name,.menu_menupunkt {cursor:pointer}
.menu_liste {background:rgba(50,50,50,0.3);list-style:none;margin:0;padding:0;width:100%}
.menu_liste,[id^="umschalter"] {display:none}
[id^="umschalter"]:checked + .menu_liste {display:block}
.menu_listenpunkt {display:block}
.menu_link,.menu_menupunkt {color:#fff;display:block;padding:6px 30px;text-decoration:none}
.menu_listenpunkt .menu_listenpunkt .menu_link,.menu_listenpunkt .menu_listenpunkt .menu_menupunkt {padding:6px 10px 10px 36px}
.menu_link:hover,.menu_link:active,.menu_menupunkt:hover {background:rgba(50,50,50,0.5)}

/* Menü mit normalen Elementen */
@media only screen and (min-width : 720px) {
  .menu {font-size:1.6vmin;font-weight:bold}
  .menu > .menu_name {display:none}
  .menu > .menu_liste {display:block}
  .menu > .menu_liste > .menu_listenpunkt {display:inline-block;position:relative}
  .menu_listenpunkt .menu_liste {position:absolute}
  .menu_listenpunkt .menu_listenpunkt .menu_link,.menu_listenpunkt .menu_listenpunkt .menu_menupunkt {padding:10px 20px}
}

/* Definition Slider */
#schieber {width:100%;background:#FFF;padding:0!important;margin:0 auto;overflow:hidden;box-sizing:border-box}
#schieber .schieberinhalt {margin:0 auto;font-size:0px;position:relative;box-sizing:border-box}
#schieber ul {position:relative;list-style:none;padding:0;box-sizing:border-box;background:black}
#schieber li {width:100%;height:100%;top:0;left:0;position:absolute;font-size:12px;list-style:none;margin:0;padding:0;opacity:0;overflow:hidden;box-sizing:border-box}
#schieber li.ansicht {opacity:1}
#schieber .hg {background-size:contain;border-radius:4px;cursor:default;display:block;position:absolute;width:100%;height:100%;background-repeat:no-repeat;background-position:center center}
#schieber .video {min-height:100%;width:auto;z-index:50}

/* Titelzeile mit Bild wechselnd */
#schieber .hg-txt {font-size:1.5vmax;position:absolute;width:100%;text-align:left;left:2%;bottom:2%;color:rgba(255,255,255,0.8)}
#schieber li.ansicht .hg-txt {-webkit-animation: titelAnimation 5s linear both;animation: titelAnimation 5s linear both}
#schieber li.start .hg-txt {-webkit-animation:none;animation:none;display:none}

@keyframes titelAnimation { 
	0% { opacity:0; }
	10% { opacity:0;transform: translateY(-20%);}
	20% { opacity:1;transform: translateY(0%);}
	70% {opacity:1;transform: translateY(0%);}
	80% {opacity:0;transform: translateY(100%);}
	100% {opacity:0;transform: translateY(100%);}
}

@-webkit-keyframes titelAnimation { 
	0% { opacity:0; }
	10% { opacity:0; -webkit-transform:translateY(-20%);}
	25% { opacity:1; -webkit-transform:translateY(0%);}
	70% {opacity:1; -webkit-transform:translateY(0%);}
	80% {opacity:0; -webkit-transform:translateY(100%);}
	100% {opacity:0; -webkit-transform:translateY(100%);}
}

/* Navigation vorwärts/rückwärts */   
#schieber-vor, #schieber-nach {
    z-index:40;
    top:50%;
    position:absolute;
    display:inline-block;
    width:50px;
    height:50px;
    line-height:52px;
    margin:0;
    backface-visibility:hidden;
    color:white;
    overflow:hidden;
    -webkit-user-select: none;
    user-select:none;
    font-size:20px;
    transition:all 0.5s;
    cursor:pointer;
}
#schieber-vor {top:50%;left:20px}
#schieber-nach {top:50%;right:20px}
#schieber-vor:hover, #schieber-nach:hover {width:80px;background-color:rgba(0,0,0,0.4)}

/* Anzeige der Seitenzahlen neben den Navigationspfeilen */
#schieber-vor div, #schieber-nach div {white-space:nowrap;opacity:0;position:absolute}
#schieber-vor div {right:6px;}
#schieber-nach div {left:6px;}
#schieber-vor:hover div, #schieber-nach:hover div {opacity:0.8;}
#schieber-vor:hover.disabled, #schieber-nach:hover.disabled {opacity:0.2;cursor:default;}

/* Pfeile hinzufügen */
#schieber-vor::before, #schieber-nach::before {
    position: absolute;
    top: 12px;
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    border-left: 4px solid white;
    border-top: 4px solid white;
    backface-visibility:hidden;
}

#schieber-vor::before {
    -ms-transform:rotate(-45deg);  /*IE 9*/
    -webkit-transform:rotate(-45deg);
    transform: rotate(-45deg);
    left:15px;
}

#schieber-nach::before {
    -ms-transform:rotate(135deg);  /*IE 9*/
    -webkit-transform:rotate(135deg);
    transform: rotate(135deg);
    right:15px;
}

/* Responsive Einstellungen */
@media only screen and (max-width:720px) {
  #inh {top:33px;max-height:93%}                                                                                 /* Inhaltsbox korrigieren */
  #schieber-vor, #schieber-nach {display:none}                                                                   /* Pfeile ausblenden */
  .kasten {width:60%;padding:5px;right:7%}                                                                       /* Kasten breiter */
}

@media only screen and (max-width:720px) and (orientation:landscape) {
  #inh {max-height:86%}                                                                                          /* Inhaltsbox korrigieren */
}