/* =Kunde: 	Vendemmia
-----------------------------------------------------------------------------*/

/* =Imports
-----------------------------------------------------------------------------*/
@import "css/panel.css";
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* =Root
-----------------------------------------------------------------------------*/
:root {
	--uk-primary: rgba(102,100,185,1);
	--uk-primary-contrast: rgba(255,255,255,1);
	--uk-secondary: rgba(68,67,70,1);
	--uk-secondary-contrast: rgba(255,255,255,1);
	--uk-bright: rgba(240,240,242,1);
	--uk-bright-contrast: rgba(68,67,70,1);
	--uk-black: rgba(68,67,70,1);
	--uk-white: rgba(255,255,255,1);  
	--uk-transp: rgba(255,255,255,0);
	
	--uk-modal: rgba(68,67,70,.7);
	
	--manifest-theme: #AFA08C;
	--manifest-bg: #363838;
	
	--container-max: calc(1400px - 80px);
	--container: calc(1400px - 80px);
    --container-pad: 40px;
	
	--grid-gap: 30px;
	--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: 22px/34px;
	--uk-font-color: rgba(99,101,105,1);
	--uk-font-light: 300;
	--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;
	--hero-h: 100vh;

	/* 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-h-top: 50px;
	--logo-h-stuck: 40px;
	--logo-top: 50px;
	--logo-top-stuck: 6px;
    --logo-left: 0px;
    --logo-left-stuck: 0px;
	
    --ham-top: 50px;
    --ham-right: -40px;
    --ham-shift-y-stuck: -62px;
    --ham-shift-x-stuck: 10px;

}


/* =General
-----------------------------------------------------------------------------*/
html  {
	-webkit-text-size-adjust: 100%;
	height: 100%;
	background: var(--uk-white);
	color: var(--uk-font-color);
	font-family: var(--uk-font-base);
	font-weight: var(--uk-font-light);
}
body  {
	text-decoration: none;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding-top: var(--nav-h-top);
	transition: var(--tr-ui);
}
/* =Links
-----------------------------------------------------------------------------*/
a, .uk-link {
  color: var(--uk-primary);
  text-decoration: none;
  cursor: pointer;
  transition: var(--tr-ui);
}
a:hover, a:focus, a:hover, .uk-link:hover {
  color: var(--uk-secondary);
  text-decoration: none;
  transition: var(--tr-ui);
}
::-moz-selection { 
	background: var(--uk-primary); color: var(--uk-white); text-shadow:none; 
}
::selection { 
	background: var(--uk-primary); color: var(--uk-white); text-shadow:none; 
}

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

* + h1, * + .uk-h1, * + h2, * + .uk-h2, * + h3, * + .uk-h3, * + h4, * + .uk-h4, * + h5, * + .uk-h5, * + h6, * + .uk-h6 {
    margin-top: 0px;
}
h1, .uk-h1 {
	font-family: var(--uk-font-base);
	font-size: var(--uk-header-large);
	font-weight: var(--uk-font-light);
	padding-top: 20px;
	padding-bottom: 80px;
}
h2, .uk-h2 {
	font-family: var(--uk-font-base);
	font-size: var(--uk-header-medium);
	font-weight: var(--uk-font-bold);
	margin-top: 20px;
	margin-bottom: 40px;
	color: var(--uk-primary);
	size: var(--uk-header);
}
h3, .uk-h3 {
	font-family: var(--uk-font-base);
	font-size: var(--uk-header);
	font-weight: var(--uk-font-bold);
	size: var(--uk-header);
	margin-top: 20px;
	margin-bottom: 40px;
}
h4, .uk-h4 {
	font-family: var(--uk-font-base);
	font-size: var(--uk-header);
	font-weight: var(--uk-font-light);
	margin-top: 20px;
	margin-bottom: 40px;
}

p {
	font-family: var(--uk-font-base);
}
strong, .uk-strong {
	font-weight: var(--uk-font-bold);
	color: var(--uk-primary);
}

.grid > .column-4 p strong {
    padding-right: 60px;
	font-size: var(--uk-header);
}

ul li p {
	margin: 0px;
}
.list ul{
  list-style: none;
  margin: 0;
  padding: 0 0 var(--grid-gap);
}
.list li{
  position: relative;
  margin: 0px;
  padding-left: 1.4em;
}
.list li::before{
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--uk-primary);
}
.list ul ul{
  margin-top: 0.35em;
  padding-left: 1.4em;
}
.list a{
  color: var(--uk-primary);
  text-decoration: none;
  transition: color var(--t-base) var(--e-io);
}
.list a:hover{
  color: var(--uk-secondary);
}
.uk-text-muted {
    color: var(--uk-secondary) !important;
}

/* =Color
-----------------------------------------------------------------------------*/
.uk-primary {
	background-color: var(--uk-primary);
	color: var(--uk-primary-contrast);
}
.uk-secondary {
	background-color: var(--uk-secondary);
	color: var(--uk-secondary-contrast);
}
.hellgrau, .bright {
	background-color: var(--uk-bright);
	color: var(--uk-bright-contrast);
}
:focus-visible{
  outline: 0px solid currentColor;
  outline-offset: 0px;
}
.uk-light {
	color: var(--uk-white);
}

/* =Grid
-----------------------------------------------------------------------------*/
.container{
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-pad);
	padding-right: var(--container-pad);
}
.grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}
.grid > *{
  margin: 0;
}
.grid > .column-12{ flex: 0 0 100%; }
.grid > .column-9 { flex: 0 0 calc(75% - (var(--grid-gap) * 1 / 4)); } 
.grid > .column-8 { flex: 0 0 calc(66% - (var(--grid-gap) * 1 / 4)); }
.grid > .column-6 { flex: 0 0 calc(50% - (var(--grid-gap) / 2)); }
.grid > .column-4 {
    flex: 0 0 calc(33.3333% - (var(--grid-gap) * 2 / 3));
}
.grid > .column-3 { flex: 0 0 calc(25% - (var(--grid-gap) * 3 / 4)); }

.grid figure {
	overflow: hidden;
}
.grid figure img{
  display: block;
  width: 100%;
  height: auto;
}
.video iframe{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}
.des-gap {
  width: 100%;
  height: 150px;
}
.des-gap.gap-default {
  height: var(--gap-height);
}

/* =Header
-----------------------------------------------------------------------------*/
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
.site-header::before{
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1;
  height: 240px;
  background: linear-gradient(180deg, var(--uk-white) 0%, var(--uk-transp) 100%);
  transition: height var(--t-base) var(--e-io),
              background-color var(--t-base) var(--e-io);
}
.site-header.no-cover::before {
  background: var(--uk-transp);
  height: 0px;
}
.site-header.is-stuck::before{
  height: var(--nav-h-stuck);
  background: var(--uk-white);
  border-bottom: 1px solid var(--uk-bright);
}
.site-header > *{
  position: fixed;
  z-index: 2;
}
.site-header-inner{
  position: relative; 
  height: 0;
}
.container{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}


/* =Logo
-----------------------------------------------------------------------------*/
.site-header .nav-logo{
  position: fixed;
  z-index: 1100;
  transform: translate3d(var(--logo-left), var(--logo-top), 0) scale(1.5);
  transform-origin: left top;
  color: var(--uk-black);
  transition: transform var(--t-base) var(--e-io),
              color var(--t-base) var(--e-io);
  will-change: transform, color;
}
.site-header.is-stuck .nav-logo{
  transform: translate3d(var(--logo-left-stuck), var(--logo-top-stuck), 0) scale(1);
  color: var(--uk-primary);
}
.site-header .nav-logo svg{
  height: var(--logo-h-top);
  width: auto;
  fill: currentColor;
  transition: height var(--t-base) var(--e-io);
  will-change: height;
}
.site-header.is-stuck .nav-logo svg{
  height: var(--logo-h-stuck);
}
.site-header.is-stuck .nav-logo svg #Icon,
.site-header.is-stuck .nav-logo svg #Icon-Primary {
	opacity: 1;
	transition: all var(--t-base) var(--e-io);
	will-change: opacity;
}
.site-header.is-stuck .nav-logo svg #Icon,
.site-header.is-stuck .nav-logo svg #Icon-Primary {
	opacity: 0;
	transition: all var(--t-base) var(--e-io);
	will-change: opacity;
}

.site-header .nav-logo svg #vendemmia {
  color: var(--uk-secondary);
  transition: transform var(--t-base) var(--e-io),
              color var(--t-base) var(--e-io);
  will-change: transform, color;
}
.site-header.is-stuck .nav-logo svg #vendemmia {
}
.site-header.is-stuck .nav-logo:hover svg #vendemmia {
  color: var(--uk-secondary);
}
.site-header .nav-logo svg #Icon {
  color: var(--uk-secondary);
}
.site-header .nav-logo svg #Icon-Primary {
  color: var(--uk-primary);
}

/* =Metanav
-----------------------------------------------------------------------------*/
.site-header .nav-meta{
  position: absolute;
  top: var(--meta-top);
  right: var(--meta-right);
  z-index: 1100;
  transform: translate3d(0, 0, 0);
  transition: transform var(--t-base) var(--e-io),
              opacity var(--t-base) var(--e-io);
  will-change: transform, opacity;
}
.site-header.is-stuck .nav-meta{
  transform: translate3d(0, var(--meta-shift-stuck), 0);
}
.site-header .nav-meta a {
	margin-right: 20px;
	color: var(--meta-icon-color);
	transition: color var(--t-base) var(--e-io);
}
.site-header.is-stuck .nav-meta a {
	color: var(--uk-transp);
}
.site-header .nav-meta a:hover {
	color: var(--uk-secondary);
}

/* =Navigation
-----------------------------------------------------------------------------*/
.site-header{
  --nav-link-color: var(--uk-secondary);
  --meta-icon-color: var(--uk-secondary);
  --hamburger-color: var(--uk-secondary);
}
.site-header.no-cover{
  --nav-link-color: var(--uk-secondary);
  --meta-icon-color: var(--uk-secondary);
  --hamburger-color: var(--uk-secondary);
}
.site-header .nav-wrap{
  position: absolute;
  top: var(--wrap-top);
  right: var(--wrap-right);
  z-index: 1100;

  transform: translate3d(0, 0, 0);
  transition: transform var(--t-base) var(--e-io),
              opacity var(--t-base) var(--e-io);
  will-change: transform, opacity;
}
.site-header.is-stuck .nav-wrap{
  transform: translate3d(var(--wrap-shift-x-stuck), var(--wrap-shift-y-stuck), 0);
}
.nav-wrap nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 20px;
}
.nav-wrap nav ul li{
  margin: 0;
  padding: 0;
}
.nav-wrap nav ul li a{
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: var(--uk-header-medium);
	color: var(--nav-link-color);
  text-decoration: none;
  transition: color var(--t-base) var(--e-io),
              font-size var(--t-base) var(--e-io);
}
.site-header.is-stuck .nav-wrap nav ul li a{
  font-size: var(--uk-header);
  color: var(--uk-primary);
}
.site-header.is-stuck .nav-wrap nav ul li a{
  color: var(--uk-secondary);
}
.nav-wrap nav ul li a:hover,
.site-header.is-stuck .nav-wrap nav ul li a:hover{
  color: var(--uk-primary);
}
.nav-wrap nav ul li.active > a,
.site-header.is-stuck .nav-wrap nav ul li.active > a{
  color: var(--uk-primary);
}
.nav-wrap nav ul li a:focus-visible{
  outline: 0px solid currentColor;
  outline-offset: 0px;
}

.nav-wrap nav ul li a::after,
.site-header.is-stuck .nav-wrap nav ul li a::after{
	content: '';
	width: 10px;
	height: 10px;
	opacity: 0;
	display: block;
	margin-top: -10px;
	margin-left: calc(50% - 5px);
	transition: color var(--t-base) var(--e-io);
}
.nav-wrap nav ul li:hover a::after,
.site-header.is-stuck .nav-wrap nav ul li:hover a::after, 
.nav-wrap nav ul li.active > a::after,
.site-header.is-stuck .nav-wrap nav ul li.active > a::after{
	content: '';
	width: 10px;
	height: 10px;
	opacity: 1;
	background-color: var(--uk-primary);
	display: block;
	border-radius: 100%;
	margin-left: calc(50% - 5px);
	margin-top: 6px;
	transition: all var(--t-base) var(--e-io);
}

/* =Unternavigation
-----------------------------------------------------------------------------*/
.uk-dropdown{
  --uk-position-offset: 0px;
  --uk-position-viewport-offset: 0px;
  width: auto;
  min-width: 200px;
  padding: 40px;
  background: var(--uk-white);
  color: var(--uk-secondary);
  box-shadow: 0 0px 0px rgba(0,0,0,0);
}
.uk-drop-close {
	margin-right: 30px !important;
	margin-top: 40px !important;
	float: right;
}
.nav-wrap .uk-dropdown .dropdown-inner{
  font-size: var(--uk-header-medium);
  transition: font-size var(--t-base) var(--e-io), color var(--t-base) var(--e-io);
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}
.dropdown-inner > .dropdown-col{
  flex: 0 0 calc(25% - (var(--grid-gap) * 3 / 4));
  min-width: 0;
}
.site-header.is-stuck .nav-wrap .uk-dropdown .dropdown-inner .uk-h4{
  font-size: var(--uk-header-medium);
}
.site-header.is-stuck .nav-wrap .uk-dropdown .dropdown-inner li{
  font-size: var(--uk-header);
}
.nav-wrap .uk-dropdown .dropdown-inner a{
  font-size: inherit;
}
.nav-wrap .uk-dropdown a{
  color: var(--uk-secondary);
  text-decoration: none;
  transition: color var(--t-base) var(--e-io);
}
.nav-wrap .uk-dropdown a:hover{
  color: var(--uk-primary);
}
.nav-wrap .uk-dropdown li.uk-active > a,
.nav-wrap .uk-dropdown a.active{
  color: var(--uk-primary);
}

/* =Hamburger
-----------------------------------------------------------------------------*/
.uk-navbar-toggle-animate svg > [class*="line-"]{
  transition: 0.2s ease-in-out;
  transition-property: transform, opacity;
  transform-origin: center;
  opacity: 1;
}
.uk-navbar-toggle-animate svg > .line-3{
  opacity: 0;
}
.uk-navbar-toggle-animate svg rect{
  fill: currentColor;
}
#menu.uk-open ~ .site-header .uk-navbar-toggle-animate svg > .line-3{
  opacity: 1;
}
#menu.uk-open ~ .site-header .uk-navbar-toggle-animate svg > .line-2{
  transform: rotate(45deg);
}
#menu.uk-open ~ .site-header .uk-navbar-toggle-animate svg > .line-3{
  transform: rotate(-45deg);
}
#menu.uk-open ~ .site-header .uk-navbar-toggle-animate svg > .line-1,
#menu.uk-open ~ .site-header .uk-navbar-toggle-animate svg > .line-4{
  opacity: 0;
}
#menu.uk-open ~ .site-header .uk-navbar-toggle-animate svg > .line-1{
  transform: translateY(6px) scaleX(0);
}
#menu.uk-open ~ .site-header .uk-navbar-toggle-animate svg > .line-4{
  transform: translateY(-6px) scaleX(0);
}

html.uk-offcanvas-page .uk-navbar-toggle-animate svg > .line-3{ opacity: 1; }
html.uk-offcanvas-page .uk-navbar-toggle-animate svg > .line-2{ transform: rotate(45deg); }
html.uk-offcanvas-page .uk-navbar-toggle-animate svg > .line-3{ transform: rotate(-45deg); }
html.uk-offcanvas-page .uk-navbar-toggle-animate svg > .line-1,
html.uk-offcanvas-page .uk-navbar-toggle-animate svg > .line-4{ opacity: 0; }
html.uk-offcanvas-page .uk-navbar-toggle-animate svg > .line-1{ transform: translateY(6px) scaleX(0); }
html.uk-offcanvas-page .uk-navbar-toggle-animate svg > .line-4{ transform: translateY(-6px) scaleX(0); }

.nav-hamburger{
  position: absolute;
  top: var(--ham-top);
  right: var(--ham-right);
  z-index: 1100;
  transform: translate3d(0,0,0);
  transition: transform var(--t-base) var(--e-io),
              color var(--t-base) var(--e-io);
  will-change: transform, color;
  color: var(--hamburger-color);
}
.site-header.is-stuck .nav-hamburger{
  transform: translate3d(var(--ham-shift-x-stuck), var(--ham-shift-y-stuck), 0);
  color: var(--uk-primary);
}

/* =Offcanvas
-----------------------------------------------------------------------------*/
.uk-offcanvas-bar{
  width: 40vw;
  max-width: 40vw;
}
.uk-offcanvas-overlay::before{
  background: var(--uk-modal);
  backdrop-filter: var(--uk-blur);
  -webkit-backdrop-filter: var(--uk-blur);
}
.uk-offcanvas-bar{
  background: var(--uk-primary);
  color: var(--uk-white);
}
.uk-offcanvas-bar a{
  color: var(--uk-white);
  text-decoration: none;
  transition: color var(--t-base) var(--e-io);
  font-size: var(--uk-header);
}
.uk-offcanvas-bar a:hover{
  color: var(--uk-primary);
}

.uk-offcanvas-bar .uk-accordion-title, 
.uk-offcanvas-bar .no-accordion-title{
  color: var(--uk-white);
  font-weight: var(--uk-font-bold);
  font-size: var(--uk-header-large);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color var(--t-base) var(--e-io);
  padding-top: 10px;
  padding-bottom: 10px;
}
.uk-offcanvas-bar .uk-accordion-title:hover, 
.uk-offcanvas-bar .no-accordion-title:hover{
  color: var(--uk-white);
}
.uk-offcanvas-bar .uk-accordion-title::after{
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transform: rotate(0deg);
  transition: transform var(--t-base) var(--e-io), color var(--t-base) var(--e-io);
  opacity: 1;
}
.uk-offcanvas-bar .uk-open > .uk-accordion-title::after{
  transform: rotate(45deg);
}
.uk-accordion-content {
	margin-bottom: 20px;
}


/* =Main
-----------------------------------------------------------------------------*/
body.has-overlay-header main{
  padding-top: var(--nav-h-top);
}
.uk-container {
	max-width: var(--container);
}
main{
  position: relative;
  z-index: 1;
  flex: 1;
  background-color: var(--uk-white);
  overflow: hidden;
}
section {
	padding-top: var(--padding);
	padding-bottom: var(--padding);
}
.section--bg-primary   { background: var(--uk-primary); }
.section--bg-secondary { background: var(--uk-secondary); }
.section--bg-bright    { background: var(--uk-bright); }
.section--bg-white     { background: var(--uk-white); }
.section--bg-transp     { background: var(--uk-transp); }

.hero {
	min-height: 100vh;
}
.hero .uk-slideshow-items,
.hero .uk-slideshow-items > li{
	height: var(--hero-h);
	min-height: var(--hero-h);
}
.hero--empty{
	min-height: 200px;
}
.hero .sliderTitel p {
	width: fit-content;
	background-color: var(--uk-white);
	color: var(--uk-primary);
	margin: 0 0 2px;
	padding: 4px 10px;
}


/* =Module
-----------------------------------------------------------------------------*/
.ref-item a > div:hover .uk-position-cover {
	opacity: .9;
}
.ref-item a > div:hover strong {
	color: var(--uk-white);
}
.ref-item a > div h4 {
	transition: all var(--t-base) var(--e-io);
}
.ref-item a > div:hover h4 {
	font-size: var(--uk-header-medium);
}

/* =Table
-----------------------------------------------------------------------------*/
.table .table-header {
  border-bottom: 1px solid var(--uk-secondary);
  padding-bottom: 10px;
}
.table {
  border-bottom: 1px solid var(--uk-secondary);
  padding-bottom: 10px;
}
.table .table-content {
  padding-top: 10px;
  padding-bottom: 10px;
}
.table .table-content:not(:last-of-type) {
  border-bottom: 1px solid var(--uk-bright);
}

/* =Kombiblock
-----------------------------------------------------------------------------*/
.kombiblock-grid {
  --uk-grid-gutter-horizontal: var(--grid-gap);
  --uk-grid-gutter-vertical: var(--grid-gap);
}
.kombiblock-column {
  display: flex;
  flex-direction: column;
}
.kombiblock:not(:last-of-type) > div {
  margin-bottom: var(--grid-gap);
}

/* =Accordion
-----------------------------------------------------------------------------*/
main .uk-accordion li {
  border-bottom: 1px solid var(--uk-bright);	
  transition: color var(--t-base) var(--e-io);
}
main .uk-accordion li.uk-open {
  border-bottom: 1px solid var(--uk-secondary);	
  transition: color var(--t-base) var(--e-io);
}
main .uk-accordion-title{
  color: var(--uk-primary);
  font-size: var(--uk-header);
  font-weight: var(--uk-font-bold);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color var(--t-base) var(--e-io);
  padding-top: 10px;
  padding-bottom: 10px;
}
main .uk-accordion-title:hover{
  color: var(--uk-secondary);
}
main .uk-accordion-title::after{
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transform: rotate(0deg);
  transition: transform var(--t-base) var(--e-io), color var(--t-base) var(--e-io);
  opacity: 1;
}
main .uk-accordion li.uk-open > .uk-accordion-title::after{
  transform: rotate(45deg);
}
main .uk-accordion-content {
	margin-bottom: 20px;
}


/* =Filter
-----------------------------------------------------------------------------*/
.uk-subnav-pill {
    margin-left: 0px;
}
.uk-subnav-pill>* {
    padding-left: 2px;
}
.uk-subnav-pill>*>:first-child {
    padding: 5px 10px;
    background-color: var(--uk-bright);
    color: var(--uk-bright-contrast);
}
.uk-subnav-pill>*>a:hover {
    background-color: var(--uk-secondary);
    color: var(--uk-bright);
}
.uk-subnav-pill>.uk-active>a {
    background-color: var(--uk-primary);
    color: var(--uk-white);
}

/* =Card
-----------------------------------------------------------------------------*/
.des-card {
	width: 100%;
	min-height: 400px;
}
.des-card-img {
  height: 150px;
}
.des-card-body {
  padding: var(--grid-gap);
}
.des-card-body h1, .des-card-body h2, .des-card-body h3, .des-card-body h4 {
  margin: 0px;
}
.des-card-grid {
  --uk-grid-gutter-horizontal: var(--grid-gap);
  --uk-grid-gutter-vertical: var(--grid-gap);
}
.des-card-outline {
  border: 1px solid var(--uk-secondary);
}
.des-list {
  padding-left: 0;
}
.des-list > li {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
}
.des-list > li::before {
  content: "—";
  position: absolute;
  left: 0;
}
.uk-cover-container.des-cover-3x2 {
  padding-top: 66.6667%;
}
.uk-cover-container.des-cover-1x1 {
  padding-top: 100%;
}
.uk-card-media-top .uk-cover-container {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
}
.des-card .card-icon {
	opacity: 0;
	width: 30%;
	height: auto;
	transition: all var(--t-base) var(--e-io);
}
.des-card:hover .uk-position-bottom.uk-primary {
	opacity: .9;
}
.des-card:hover .card-icon {
	opacity: 1;
}
.des-card .cards-icon {
	width: 100px;
	height: auto;
}
.des-card-icon-center {
	padding-top: 140px;
}

/* =Testimonial
-----------------------------------------------------------------------------*/
.testimonial blockquote p {
  font-size: 1.1em;
  line-height: 1.5;
}


/* =UIKIT
-----------------------------------------------------------------------------*/
.uk-lightbox {
	background-color: rgba(0,0,0,.4);
}
.uk-lightbox-toolbar {
	background-color: var(--uk-transp);
}
.uk-lightbox-button {
	color: var(--uk-secondary);
}
.uk-lightbox-toolbar * {
	color: var(--uk-secondary) !important;
}

/* =Buttons
-----------------------------------------------------------------------------*/
.uk-button{
  padding: 10px 24px;
  vertical-align: middle;
  font-size: 1em;
  line-height: 1.2;
  text-transform: none;
  transition: color .1s ease-in-out,
              background-color .1s ease-in-out,
              border-color .1s ease-in-out;
  margin-bottom: 1px;
  margin-right: 1px;
}
.uk-button-primary{
  background-color: var(--uk-primary);
  color: var(--uk-primary-contrast);
  border: 0 solid transparent;
}
.uk-button-primary:hover, .uk-button-primary:focus-visible{
  background-color: var(--uk-secondary);
  color: var(--uk-secondary-contrast);
}
.uk-button-secondary{
  background-color: var(--uk-secondary);
  color: var(--uk-secondary-contrast);
  border: 0 solid transparent;
}
.uk-button-secondary:hover, .uk-button-secondary:focus-visible{
  background-color: var(--uk-primary);
  color: var(--uk-primary-contrast);
}
.uk-button-disabled, .uk-button-disabled:hover,
.uk-button-danger:disabled, .uk-button-danger:disabled, 
.uk-button-default:disabled, .uk-button-default:disabled, 
.uk-button-primary:disabled, .uk-button-primary:disabled, 
.uk-button-secondary:disabled,.uk-button-secondary:disabled {
  cursor: not-allowed;
  border: 1px solid var(--uk-bright);
  margin-top: 16px;
  margin-bottom: 16px;
  background-color: var(--uk-bright);
  color: var(--uk-secondary);
}

/* =Formulare
-----------------------------------------------------------------------------*/
.uk-radio, .uk-checkbox, .uk-checkbox {
  background-color: var(--uk-bright);
  border-color: var(--uk-bright);
}
.uk-radio:checked,.uk-checkbox:checked,.uk-checkbox:indeterminate {
  background-color: var(--uk-secondary);
  border-color: var(--uk-secondary) !;
}
.uk-radio:checked:focus,.uk-checkbox:checked:focus,.uk-checkbox:indeterminate:focus {
  background-color: var(--uk-secondary);
}
.uk-form-label {
	font-size: .9;
	color: var(--uk-secondary);
	font-weight: 500;
}
.uk-input:not(.file-upload), .uk-select, .uk-textarea {
	background-color: var(--uk-bright);
	color: var(--uk-black);
	border: 0px solid rgba(var(--uk-bright));
	border-bottom: 2px solid var(--uk-bright);
	transition: 0.15s ease-in-out;
	transition-property: color, background-color, border;
}
.uk-input.file-upload, .uk-input.file-upload:hover{
	background-color: none;
	color: var(--uk-black);
	border: 0px solid rgba(var(--uk-bright));
	border-bottom: 0px solid var(--uk-bright);
	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: var(--uk-white);
	color: var(--uk-black);
	border-bottom: 2px solid var(--uk-bright);
}
.file-upload {
    padding: 0px;
}
input[type=file]::file-selector-button {
	font: var(--uk-font-base);
	border: none;
	background-color: var(--uk-bright);
	color: var(--uk-secondary) !important;
	padding: 10px 20px;
	border-radius: 0px;
	cursor: pointer;
	transition: background .2s ease-in-out;
	margin-right: 20px;
}
input[type=file]::file-selector-button:hover {
	background-color: var(--uk-secondary);
	color: var(--uk-bright) !important;
}
.honeypot {
	position: absolute;
	left: -9999px;
}
[data-id="captcha-input"] label {
	display: none;
}
.des-altcha-success {
	background-color: var(--uk-bright);
	color: var(--uk-secondary) !important;
    padding: 10px 24px;
	transition: all var(--t-base) var(--e-io);
}
.des-altcha-success:hover {
	background-color: var(--uk-primary);
	color: var(--uk-primary-contrast) !important;
}
.uk-tooltip{
	max-width:auto;
	padding:10px 24px;
	background: var(--uk-primary);
	border-radius:2px;
	color: var(--uk-primary-contrast);
	font-size: 14px;
}

.section--bg-bright .uk-input:not(.file-upload), 
.section--bg-bright .uk-select, 
.section--bg-bright .uk-textarea,
.section--bg-bright .uk-radio,
.section--bg-bright .uk-checkbox,
.section--bg-bright .uk-checkbox {
  background-color: var(--uk-white);
  border-color: var(--uk-white);
}
.section--bg-bright .uk-input:focus, 
.section--bg-bright .uk-select:focus, 
.section--bg-bright .uk-textarea:focus {
	background-color: var(--uk-bright);
	border-bottom: 2px solid var(--uk-secondary);
}
.section--bg-bright input[type=file]::file-selector-button {
	background-color: var(--uk-white);
}
.section--bg-bright .file-upload {
	background-color: var(--uk-bright);
}
.section--bg-bright input[type=file]::file-selector-button:hover {
	background-color: var(--uk-secondary);
	color: var(--uk-bright) !important;
}


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

/* = Mapbox
-----------------------------------------------------------------------------*/
.is-map.uk-animation-slide-bottom-medium{
  animation-name: uk-fade;
}
.mapboxgl-map, .mapbox-embed {
	height: 600px;
    min-height: 400px;
}
.mapboxgl-canvas {
}
.mapboxgl-canvas:focus{
  outline: none;
}
.mapboxgl-popup-content {
    background: var(--uk-primary) !important;
    border-radius: 0px !important;
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
    padding: 30px 20px 15px !important;
	min-width: 240px;
}
.is-map .mapboxgl-popup{
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: mapPopupFadeIn 200ms ease-in-out forwards;
}
@keyframes mapPopupFadeIn{
  to{opacity: 1;
  }
}
.mapboxgl-popup-content p, .mapboxgl-popup-content a {
	font: 16px/1.4em "Work Sans", Arial, Helvetica, Geneva, sans-serif !important;
	color: var(--uk-white);
}
.mapboxgl-popup-close-button {
    border-radius: 0px !important;
	font: 36px/40px "Work Sans", Arial, Helvetica, Geneva, sans-serif !important;
	color: var(--uk-white);
	margin-right: 10px;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-top-color: var(--uk-primary) !important;
}
.mapboxgl-marker > svg > g > g {
	fill: var(--uk-primary);
}
.mapboxgl-marker > svg > g > g > circle {
	fill: var(--uk-white);
}
a.mapboxgl-ctrl-logo {
    opacity: .3;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
    padding: 0 5px;
    background-color: rgba(0,0,0,.1) !important;
    margin: 0;
}
.mapboxgl-ctrl-group:not(:empty) {
    box-shadow: 0 0 0 1px var(--uk-white) !important;
}
.mapboxgl-ctrl-group {
    border-radius: 0px !important;
    background: var(--uk-bright) !important;
}
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-in:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-zoom-out:hover,
.mapboxgl-ctrl-group .mapboxgl-ctrl-compass:hover {
    background: var(--uk-white) !important;
}
.mapboxgl-ctrl-group button {
    background-color: inherit !important;
}
.mapboxgl-ctrl-group button+button {
    border-top: 1px solid var(--uk-white) !important;
}
.mapboxgl-ctrl a {
    color: rgba(255,255,255,.5) !important;
	border: 0 none var(--uk-transp);
}


/* =Footer
-----------------------------------------------------------------------------*/
.element svg {
	height: 50vh;
	width: auto;
	position: absolute;
	right: -10vh;
	margin-top: -20vh;
	z-index: 0;
	opacity: .05;
}
.element img {
	
}
.site-footer{
  position: sticky;
  bottom: 0;
  z-index: 0;
  background-color: var(--uk-secondary);
  color: var(--uk-secondary-contrast);
  transform: none;
  padding-top: 60px;
	padding-bottom: 60px;
}
.site-footer a{
  color: var(--uk-bright);
}
.site-footer a:hover{
  color: var(--uk-white);
}
.site-footer.is-revealed{
  transform: translate3d(0, 0, 0);
}
.site-footer a.footer-logo svg {
	display: block;
	width: 200px;
	margin-bottom: 40px;
}
.site-footer a.footer-logo svg #Icon-Primary circle {
	fill: var(--uk-primary);
}
.footer-sentinel{
  height: 1px;
}

/* =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);
}
.des-cookie-dialog{
  position: absolute;
  right: 30px;
  bottom: 30px;
  max-width: 460px;
  width: calc(100% - 60px);
  z-index: 1;
}
.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);
}

/* =Colophon
-----------------------------------------------------------------------------*/
.colophon{
	display:block;
	position:fixed;
	bottom:45px;
	left:5px;
	width:25px;
	height:25px;
	z-index: 2;
	background:url(img/Designheit-Bildmarke.svg) no-repeat right bottom;
	opacity: 0.05;
	transition: var(--tr-ui);
}
.colophon:hover{
	opacity:1;
}

/* @xl – Laptop / Tablet XL */
@media (max-width: 1400px) {
:root {
	--variable: ;
}
}

/* @l – Laptop / Tablet Landscape */
@media (max-width: 1200px) {
:root {
	--uk-font-base: "Work Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--uk-font-size: 20px/34px;
	--uk-header-large: 2.6rem;
	--uk-header-medium: 1.4rem;
	--uk-header: 1.2rem;
}
h2, .uk-h2 {
    margin-top: 20px;
    margin-bottom: 20px;
}
.des-gap {
  height: 90px;
}
.des-card-icon-center {
    padding-top: 140px;
}
.uk-card-body {
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
}
}

/* @m – Tablet Portrait */
@media (max-width: 960px) {
:root{ 
	--container-pad: 20px; 	
    --ham-top: 10px;
    --ham-right: 20px;
    --ham-shift-y-stuck: -22px;
    --ham-shift-x-stuck: 10px;	
	--logo-top: 24px;
	--logo-top-stuck: 12px;
	--hero-h: 50vh;
	--uk-blur: blur(2px);
}
h1, .uk-h1 {
    padding-top: 20px;
    padding-bottom: 40px;
}
.sliderTitel{
    padding-bottom: 0px;
}
.dropdown-inner > .dropdown-col{
	flex-basis: calc(50% - (var(--grid-gap) / 2));
}
.uk-offcanvas-bar{
  width: 90vw;
  max-width: 90vw;
}
.uk-offcanvas-overlay::before{
  background:var(--uk-modal);
}
.grid > .column-6{
	flex-basis: calc(50% - (var(--grid-gap) / 2));
}
.grid > .column-12,
.grid > .column-9,
.grid > .column-8,
.grid > .column-4,
.grid > .column-3{
	flex-basis: 100%;
}
.hero {
	min-height: var(--hero-h);
}
.hero--empty{
	min-height: 120px;
}
.hero .uk-slideshow-items,
.hero .uk-slideshow-items > li{
  height: var(--hero-h);
  min-height: var(--hero-h);
}
.kombiblock--mobile-media-first .kombiblock-media {
	order: -1;
}
.kombiblock--colB-first .kombiblock-col--a { order: 2; }
.kombiblock--colB-first .kombiblock-col--b { order: 1; }
.kombiblock--colA-first .kombiblock-col--a { order: 1; }
.kombiblock--colA-first .kombiblock-col--b { order: 2; }
}
.des-cookie-dialog{
    width: calc(100% - 40px);
	margin: 20px !important;
}
.mapboxgl-map, .mapbox-embed {
	height: 600px;
    min-height: 400px;
}

/* @s – Phone Portrait */
@media (max-width: 640px) {
:root {
	
    --container-pad: 10px;
    --grid-gap: 10px;
    --padding: 40px;
	
	--logo-h-top: 30px;
	--logo-h-stuck: 40px;
	--logo-top: 25px;
	--logo-top-stuck: 8px;
	
	--uk-header-large: 1.8rem;
	--uk-header-medium: 1.1rem;
	--uk-header: 1.1rem;
}
.des-gap {
    height: 0px;
}
.dropdown-inner > .dropdown-col{
    flex-basis: 100%;
}
.uk-offcanvas-bar{
  width: 100vw;
  max-width: 100vw;
}
.grid > .column-6{
	flex-basis: 100%;
}
.colophon{
	display:none;
}
.des-cookie-dialog{
    width: calc(100% - 20px);
	margin: 10px !important;
}
.uk-subnav-pill>*>:first-child {
    padding: 4px 8px;
}
.uk-position-large {
    margin: var(--grid-gap);
    --uk-position-margin-offset: var(--grid-gap);
}
.info {
	margin-bottom: 40px;
}
  
  }