/* =Kunde: 	Gallivet
-----------------------------------------------------------------------------*/

/* =Imports
-----------------------------------------------------------------------------*/
@import "css/cookie-modal.css";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700&display=swap');

:root {
	--uk-primary: rgba(175,160,140,1);
	--uk-primary-contrast: rgba(255,255,255,1);
	--uk-secondary: rgba(84,86,86,1);
	--uk-secondary-contrast: rgba(255,255,255,1);
	--uk-bright: rgba(240,240,242,1);
	--uk-bright-contrast: rgba(99,101,105,1);
	--uk-black: rgba(54,56,58,1);
	--uk-white: rgba(255,255,255,1);  
	--uk-transp: rgba(255,255,255,0);
	
	--uk-modal: rgba(54,56,56,.7);
	
	--manifest-theme: #AFA08C;
	--manifest-bg: #363838;
	
	--container-max: calc(1400px - 80px);
	--container: calc(1400px - 80px);
    --container-pad: 40px;
	
	--grid-gap: 40px;
	--gap-height: 60px;
	--padding: 80px;
	--uk-blur: blur(5px);
	
	--uk-font-base: "Work Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--uk-font-size: 20px;
	--uk-font-color: rgba(99,101,105,1);
	--uk-font-light: 300;
	--uk-font-regular: 400;
	--uk-font-bold: 600;
	--uk-header-large: 3rem;
	--uk-header-medium: 1.8rem;
	--uk-header: 1.2rem;
	
	--t-fast: 350ms;
	--t-base: 500ms;
	--e-io: ease-in-out;
	--tr-ui: color var(--t-base) var(--e-io),
	       background-color var(--t-base) var(--e-io),
	       border-color var(--t-base) var(--e-io),
	       box-shadow var(--t-base) var(--e-io),
	       transform var(--t-base) var(--e-io),
	       opacity var(--t-base) var(--e-io),
	       height var(--t-base) var(--e-io),
		   padding var(--t-base) var(--e-io),
		   margin var(--t-base) var(--e-io),
	       fill var(--t-base) var(--e-io);
	
	--uk-radius: 6px;

	/* Header */
	--nav-h-top: 0px;
	--nav-h-stuck: 50px;
	
	--meta-top: 20px;
	--meta-right: 0px;
	--meta-shift-stuck: -50px;
	
	--wrap-top: 70px;
	--wrap-right: 20px;
	--wrap-shift-y-stuck: -60px;  /* 70 -> 10 */
	--wrap-shift-x-stuck: 0px;  /* 40 -> 20 */
	
	--logo-top: 50px;
	--logo-top-stuck: 12px;
    --logo-left: 0px;
    --logo-left-stuck: 0px;
	
    --ham-top: 50px;
    --ham-right: -40px;
    --ham-shift-y-stuck: -62px;
    --ham-shift-x-stuck: 10px;

}


html {
	/* 2 */
	-webkit-text-size-adjust: 100%;
	/* 3 */
	background: #fff;
	color: #666;
	font: 300 16px/1.5 "Open Sans", Arial, sans-serif;
}

body {
	padding-top: 150px;
	text-decoration: none;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}

/* =Links
-----------------------------------------------------------------------------*/

a, .uk-link {
  color: rgba(225,135,0,1);
  text-decoration: none;
  cursor: pointer;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
a:hover, a:focus, a:hover, .uk-link:hover {
  color: rgba(0,0,0,1);
  text-decoration: none;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}
a:focus, a:hover {
	color: rgba(0,0,0,1);
}

::-moz-selection { 
	background: rgba(225,135,0,1); color: #fff; text-shadow:none; 
}
::selection { 
	background: rgba(225,135,0,1); color: #fff; text-shadow:none; 
}


/* =Cookie
-----------------------------------------------------------------------------*/
.des-cookie-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.des-cookie-modal.is-open{
  display: block;
}
.des-cookie-backdrop{
  position: absolute;
  inset: 0;
  background: var(--uk-modal);
  backdrop-filter: var(--uk-blur);
  -webkit-backdrop-filter: var(--uk-blur);
  pointer-events: none;
}
.des-cookie-dialog{
  position: absolute;
  max-width: 460px;
  width: calc(100% - 60px);
  z-index: 1;
}
.des-cookie-dialog--right{
  right: 30px;
  bottom: 30px;
}
.des-cookie-dialog--left{
  left: 30px;
  bottom: 30px;
}
.des-cookie-dialog--center{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.des-cookie-dialog--bottom{
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  width: 100%;
  border-radius: 0 !important;
}
.des-cookie-intro p{
  margin: 0;
}
.des-cookie-close{
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.des-cookie-btn{
  z-index: 20;
  width: 40px;
  height: 40px;
  padding: 0px;
  position: fixed;
  bottom: 0px;
  left: auto;
  color: rgba(0,0,0,.2);
  transition: var(--tr-ui);
}
.des-cookie-btn:hover{
  color: var(--uk-secondary);
}


/* =Layout
-----------------------------------------------------------------------------*/

body {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
header, section, footer {
	display: block;
	clear: both;
	float: none;
}
section:nth-of-type(odd) {
	background-color: rgba(255,255,255,1);
}
footer {
	padding-top: 50px;
	padding-bottom: 50px;
	border-top: 1px solid rgba(0,0,20,.05);
}
.uk-container {
}

/* =Header

-----------------------------------------------------------------------------*/

header {
	background-color: rgba(255,255,255,1);
	height: 120px;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 200;
}
.logo {
	margin-top: 20px;
	padding-bottom: 0px;
}
.logo img {
	width: 300px;
}
.menu {
	
}
.uk-modal-close-default {
	padding-top: 25px;
}
.uk-open {
	z-index: 2000;
}
.hauptmenu > li > a {
	font: 300 1.8em/2 "Open Sans", Arial, sans-serif;
	color: rgba(255,255,255,1);
}
.sprachmenu {
	display: block;
	float: left;
}
.sprachmenu > a {
	font: 300 1em/2 "Open Sans", Arial, sans-serif;
	color: rgba(0,0,0,.6);
	padding-top: 15px;
	padding-right: 20px;
	display: inline-block;
	text-transform: uppercase;
}

.sprachmenu > a:hover, .sprachmenu > a.uk-active {
	font: 300 1em/2 "Open Sans", Arial, sans-serif;
	color: rgba(0,0,0,1);
}

.uk-nav-default {
	font-size: 1rem;
}

.uk-nav-default > li > a:hover {
	color: rgba(0,0,0,1) !important;
}

.uk-nav-default > li > a.uk-active h2, .uk-nav > li > a.uk-active {
	color: rgba(0,0,0,1);
}

.uk-nav > li > a {
	padding-top: 3px;
	padding-bottom: 3px;
}

/* =Feintuning
-----------------------------------------------------------------------------*/

.padding-left {
	padding-left: 105px;
}

.padding-right {
	padding-right: 105px;
}

.padding-top {
	padding-top: 50px;
}

.padding-top {
	padding-bottom: 50px;
}

.uk-border-rounded {
	border-radius:10px;
}


/* =Typography
-----------------------------------------------------------------------------*/

* + h1, * + .uk-h1, * + h2, * + .uk-h2, * + h3, * + .uk-h3, * + h4, * + .uk-h4, * + h5, * + .uk-h5, * + h6, * + .uk-h6 {
    margin-top: 0px;
}
h1 {
	font: 300 3em/1.4 "Open Sans", Arial, sans-serif;
	color: rgba(225,135,0,1);
	margin-bottom: 30px;
}
h2 {
	font: 300 1.8em/1.4 "Open Sans", Arial, sans-serif;
	color: rgba(0,0,0,.6);
}
h2 span {
	
}
h3 {
	font: 700 1em/1.4 "Open Sans", Arial, sans-serif;
	color: rgba(0,0,0,.6);
}
p {
}
strong {
	font-weight: 700;
}
ul,ol {
	padding-left: 16px;
}
li p {
    margin: 0 0 0px 0;
}
.hobet{
	color: rgba(0,0,20,.25);
	margin-top: -40px;
}
.divider {
	height: 1px;
	width: 1200px;
	max-width: 100%;
	background-color: rgba(0,0,0,.1);
	display: block;
	margin: 60px auto 20px;
	clear: both;
	float: none;
}

/* =Color
-----------------------------------------------------------------------------*/
.orange {
	background: rgba(225,135,0,1); 
	color: #fff;
}

.white {
	background: rgba(255,255,255,.8); 
}

.lightgrey {
	background-color: rgba(0,0,20,.05);
}

.grey {
	background-color: rgba(0,0,20,.25);
	color: #fff;
}

.grey:hover {
	background-color: rgba(225,135,0,1);
	color: #fff;
	-webkit-transition: all .15s ease-in-out;
	   -moz-transition: all .15s ease-in-out;
	     -o-transition: all .15s ease-in-out;
	        transition: all .15s ease-in-out;
}

.darkgrey {
	background-color: rgba(0,0,20,.85);
	color: #fff;
}

/* =Grid
-----------------------------------------------------------------------------*/
.grid > *:not(:last-child) {
	margin-right: 20px;
	margin-bottom: 60px;
}
.grid > .column-12 {
	width: calc(100% - 20px);
}
.grid > .column-6 {
	width: calc(50% - 20px);
}
.grid > .column-4 {
	width: calc(33% - 20px);
}
.grid > .column-3 {
	width: calc(25% - 20px);
}
.grid figure {
	overflow: hidden;
}
.video iframe {
    height: 675px;
    width: 100%;
}




/* =Offcanvas
-----------------------------------------------------------------------------*/

/* =Seitenaufbau
-----------------------------------------------------------------------------*/
.slider {
	margin-bottom: 0px;
}

/* =Module
-----------------------------------------------------------------------------*/
.startboxen > .uk-width-1-1\@m .box-content{
	width: calc(50% - 40px);
	float: left;
}
.startboxen > .uk-width-1-1\@m .img{
	width: calc(50% - 40px);
	float: right;
}
.startboxen > .uk-width-1-2\@m .box-content{
	min-height: 220px;
}


/* =Plugins
-----------------------------------------------------------------------------*/
.uk-lightbox {
	background-color: rgba(255,255,255,.9);
}
.uk-lightbox-toolbar {
	background-color: rgba(255,255,255,0);
}
.uk-lightbox-button {
	background-color: rgba(84,84,88,.8);
	color: rgba(255,255,255,1);
}
.uk-lightbox-toolbar * {
	color: rgba(84,84,84,1) !important;
}

/* =Formulare
-----------------------------------------------------------------------------*/
.uk-button-disabled {
	cursor: not-allowed;
	border: 1px solid transparent;
	margin-top: 16px;
	margin-bottom: 16px;
}

.uk-radio,
.uk-checkbox,
.uk-checkbox {
  background-color: rgba(255,255,255,1);
  border-color: rgba(84,84,88,0);
}

.uk-radio:checked,
.uk-checkbox:checked,
.uk-checkbox:indeterminate {
  background-color: rgba(84,84,88,1);
  border-color: transparent;
}

.uk-radio:checked:focus,
.uk-checkbox:checked:focus,
.uk-checkbox:indeterminate:focus {
  background-color: rgba(0,0,0,1);
}

.uk-form-label {
	font-size: 1em;
	color: rgba(84,86,85,.5);
}

.uk-form-horizontal .uk-form-controls{
}


.uk-input, .uk-select, .uk-textarea {
	background-color: rgba(255,255,255,1);
	color: #000;
	border: 0px solid rgba(197,199,199,1);
	border-bottom: 2px solid rgba(244,244,244,1);
	transition: 0.15s ease-in-out;
	transition-property: color, background-color, border;
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
	outline: none;
	background-color: rgba(255,255,255,1);
	color: #000;
	border-bottom: 2px solid rgba(84,86,85,1);
}
.honeypot {
	position: absolute;
	left: -9999px;
}



/* =
-----------------------------------------------------------------------------*/

/* = Mapbox
-----------------------------------------------------------------------------*/

.mapboxgl-map {
	height: 600px !important;
    min-height: 400px !important;
}
.mapboxgl-canvas {
}
.mapboxgl-popup-content {
    background: rgba(225,135,0,1) !important;
    border-radius: 0px !important;
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
    padding: 30px 20px 15px !important;
	min-width: 240px;
}
.mapboxgl-popup-content p, .mapboxgl-popup-content a {
	font: 16px/1.4em "dinnextltpro-light", Arial, Helvetica, Geneva, sans-serif !important;
	color: rgba(255,255,255,1);
}
.mapboxgl-popup-close-button {
    border-radius: 0px !important;
	font: 36px/40px "dinnextltpro-light", Arial, Helvetica, Geneva, sans-serif !important;
	color: rgba(255,255,255,1);
	margin-right: 10px;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-top-color: rgba(225,135,0,1) !important;
}
.mapboxgl-marker > svg > g > g {
	fill: rgba(225,135,0,1);
}
.mapboxgl-marker > svg > g > g > circle {
	fill: rgba(255,255,255,1);
}
a.mapboxgl-ctrl-logo {
    opacity: .3;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    padding: 0 5px;
    background-color: rgba(255,255,255,1) !important;
    margin: 0;
}
.mapboxgl-ctrl-group:not(:empty) {
    box-shadow: 0 0 0 1px rgba(255,255,255,1) !important;
}
.mapboxgl-ctrl-group {
    border-radius: 0px !important;
    background: rgba(240,240,242,1) !important;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
}
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-in:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-out:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-compass:hover {
    background: rgba(255,255,255,1) !important;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
}
.mapboxgl-ctrl-group button {
    background-color: inherit !important;
}
.mapboxgl-ctrl-group button+button {
    border-top: 1px solid rgba(255,255,255,1) !important;
}
.mapboxgl-ctrl a {
    color: rgba(0,0,0,.2) !important;
	border: 0 none rgba(255,255,255,0);
}


/* =Misc
-----------------------------------------------------------------------------*/

.colophon{
	display:block;
	position:fixed;
	bottom:25px;
	left:25px;
	width:25px;
	height:25px;
	background:url(img/Designheit-Bildmarke.svg) no-repeat right bottom;
	opacity: 0.05;
	filter: alpha(opacity=5);
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.colophon:hover{
	opacity:1;
	filter: alpha(opacity=100);
	}

.footer {
	padding-top: 20px;
	padding-bottom: 20px;
}
.footer > * ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* @l – Laptop / Tablet Landscape */

@media (max-width: 1200px) {
.colophon{
	display:none;
}
h2 span {
	display: block;
}

}
/* @m – Tablet Portrait */

@media (max-width: 960px) {
.colophon{
	display:none;
}
.grid {
	display: block;
}
.grid > .column-6 {
	width: 100%;
	margin-right: 0px;
}
.grid > .column-4 {
	width: 100%;
	margin-right: 0px;
}
h1 {
	font: 300 2em/1.4 "Open Sans", Arial, sans-serif;
}
h2 span {
	display: inline;
}
.padding-left {
	padding-left: 35px;
}
.padding-right {
	padding-right: 35px;
}
.startboxen > .uk-width-1-1\@m .box-content,
.startboxen > .uk-width-1-1\@m .img{
	width: 100%;
	float: none;
}
.startboxen > .uk-width-1-2\@m .box-content{
	min-height: 100px;
}

}

/* @s – Phone Portrait */
@media (max-width: 640px) {
.colophon{
	display:none;
}
.sprachmenu {
	float: none;
	margin-bottom: 20px;
}
.sprachmenu > a {
	padding-right: 40px;
	padding-left: 0px;
	color: rgba(255,255,255,.6);
}
.sprachmenu > a:hover, .sprachmenu > a.uk-active {
	color: rgba(255,255,255,1);
}
h2 span {
	display: block;
}
  
  }