:root {
  --kok-gold: #c59b5c;
  --kok-gold-light: #d8b57a;
  --kok-black: #0d0d0d;
  --kok-white: #f5f2eb;
  --kok-transition: all .35s ease;
}

/* ---- BUTTON BASE ----- */

.parallax-banner .button {
	margin:2rem 0 0 0
}

.button,
button,
input[type="submit"] {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;

  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;

  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;

  transition: var(--kok-transition);
}

/* ---- OUTLINE BUTTON / ANGESCHRÄGT ----- */

.button.is-outline {
  position: relative;
 font-weight:400;
	letter-spacing:0.2em;
  color: var(--kok-gold);
  background: transparent;
  border: 0 !important;
min-height:unset;
  padding: 1rem 3rem 1rem 4rem;
  clip-path: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.button.is-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='18,1 299,1 282,57 1,57' fill='none' stroke='%23c59b5c' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.button.is-outline:hover {
  color: var(--kok-white);
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 58' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='18,1 299,1 282,57 1,57' fill='none' stroke='%23c59b5c' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.button.is-outline span {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
}

.button.is-outline span::after {
  content: "→";

  font-size: 1.2em;
  line-height: 1;

  transition: transform .3s ease;
}

.button.is-outline:hover span::after {
  transform: translateX(4px);
}

/* ---- GOLD BUTTON ----- */

.button.is-gold {
  background: var(--kok-gold);
  color: var(--kok-black);

  padding: 0 3rem;
  min-height: 58px;
  line-height: 58px;

  clip-path: polygon(
    18px 0,
    100% 0,
    calc(100% - 18px) 100%,
    0 100%
  );
}

.button.is-gold:hover {
  background: var(--kok-gold-light);
  color: var(--kok-black);
}

/* ---- TEXT BUTTON ----- */

.button.is-text {
  background: transparent;
  border: 0;
  padding: 0;
font-size:1.3rem;
  color: var(--kok-gold);

  min-height: auto;
  line-height: 1.4;

  clip-path: none;
}

.button.is-text.big {
	font-size:1.8rem;
}

.button.is-text.small {
	font-size:1.1rem;
	margin:0;
}

.button.is-text::before {
  display: none;
}

.button.is-text:hover {
  color: #000;
	background: transparent;
}

.button.is-text span {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.button.is-link {
	padding:0;
	color:#000;
	font-size:1rem;
	display:inline
}

/* ---- ICON / ARROW ----- */

.button i {
  font-size: 1rem;
  transition: transform .3s ease;
}

.button:hover i {
  transform: translateX(4px);
}

/* ---- BACK TO TOP BUTTON ----- */

/* ---- BACK TO TOP ----- */

#top-link {
  right: 2rem;
  bottom: 2rem;

  width: 46px;
  height: 46px;

  padding: 0 !important;
  min-height: unset;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000 !important;
  border: 0 !important;
  border-radius: 999px !important;

  transition: all .3s ease;
}

#top-link::before {
	display:none;
}

#top-link i {
  color: #fff;
  font-size: 1.1rem;
  transition: transform .3s ease;
	left:2px
}

#top-link:hover {
  background: var(--kok-gold) !important;
}

#top-link:hover i {
  transform: translateY(-1px);
}

/* ---- DIVIDERS ----- */

.kok-divider {
  width: 120px;
  height: 2px;

  background: linear-gradient(
    90deg,
    #c59b5c 0%,
    rgba(197,155,92,.85) 70%,
    rgba(197,155,92,0) 100%
  );

  margin: 2rem 0;
}

.kok-divider.is-light {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,.4) 100%
  );
}

@media (max-width: 549px) { 
	
	.button,
button,
input[type="submit"] {
 font-size: 1rem;
}
	
	.button.is-outline {
         padding: 1rem 1.5rem 1rem 2rem;
}
	
	.button.is-outline span::after {
  content: "→";

  font-size: 1.6em;
}
	
	.button.is-text {
  padding: 0;
font-size:1rem;
}
	
	.button.is-text.big {
	font-size:1.2rem;
}
	
	.button.is-outline span {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
	
}